怎么把表格上下居中啊_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:21:09
Original
1726 people have browsed it



    
     style="height:180px;margin-top:-90px;top:50%;position: absolute;left:50%;margin-left:-120px;width:240px;" >
                     
用户名
     
                      密 码
                      验证码
                         
                       
                               
    


回复讨论(解决方案)

你说的是垂直居中吧,把表格行的高度和行高设置成相同值,就可以了。例如:height:35px; line-height:35px;

<style>*{margin:0;padding:0;border:0;}body{font-size:12px;}.formbox{width:100%;height:100%;}.formbox .ftable{position:absolute;background-color:#ccffcc;left:50%;top:50%;display:block;margin:-100px 0 0 -150px;width:300px;height:200px;}.formbox .ftable td{text-align:left;padding:10px;}.formbox .ftable td input{border:1px solid #ccc;width:80px;height:20px;}</style><div class="formbox">    <form>        <table class="ftable">            <tr>                <td>用户名</td>                <td><input type="text" name="username"  id="username"></td>            </tr>            <tr>                <td>密 码</td>                <td><input type="password" name="password" id="password"></td>            </tr>            <tr>                <td>验证码</td>                <td><input type="text" name="yanzheng"></td>            </tr>            <tr>                <td colspan="2"><input type="button" value="登 录" onclick="r();"/><input type="reset" value="重 置"/></td>            </tr>                              </table>    </form></div>
Copy after login
Copy after login

直接放body 里formbox 可以不要.

谢谢啦 已经弄好了 ,


<style>*{margin:0;padding:0;border:0;}body{font-size:12px;}.formbox{width:100%;height:100%;}.formbox .ftable{position:absolute;background-color:#ccffcc;left:50%;top:50%;display:block;margin:-100px 0 0 -150px;width:300px;height:200px;}.formbox .ftable td{text-align:left;padding:10px;}.formbox .ftable td input{border:1px solid #ccc;width:80px;height:20px;}</style><div class="formbox">    <form>        <table class="ftable">            <tr>                <td>用户名</td>                <td><input type="text" name="username"  id="username"></td>            </tr>            <tr>                <td>密 码</td>                <td><input type="password" name="password" id="password"></td>            </tr>            <tr>                <td>验证码</td>                <td><input type="text" name="yanzheng"></td>            </tr>            <tr>                <td colspan="2"><input type="button" value="登 录" onclick="r();"/><input type="reset" value="重 置"/></td>            </tr>                              </table>    </form></div>
Copy after login
Copy after login

直接放body 里formbox 可以不要

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template