Heim >Web-Frontend >HTML-Tutorial >怎么把表格上下居中啊_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:21:091765Durchsuche



    
     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>

直接放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>

直接放body 里formbox 可以不要

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn