ホームページ >ウェブフロントエンド >htmlチュートリアル >テーブルを上下の中央に配置する方法_html/css_WEB-ITnose
テーブルを上下の中央に配置する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:21:091763ブラウズ
dbb35fbd6786770817d9132d247468aa
d8ac7fc473d31e4fe00d38ce6129a3e1用户名b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cf3dfa5128e56e532519f0d8164b97ebfb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
e95b8d3e6563e4c12f7175de07f368b6b6c5a531a458a2e790c1fd6421739d1c密解b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c1e392a36659910b050512532c0183966b90dd5946f0946207856a8a37f441edf< /tr>
e95b8d3e6563e4c12f7175de07f368b6b6c5a531a458a2e790c1fd6421739d1c验证码b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1caeac9eeef8aa82f226b9f51d578772deb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
e95b8d3e6563e4c12f7175de07f368b6dd70fc6031a78a130dfe84a09a597a52c2eb5b765d8f4de39b4ffb7a4ba2e6b9
0149d76269d939587d38a6d27659e394b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
264c8b0e0a1db44ba947f405b03bda4d
36cc49f0c466276486e50c850b7e4956
回复讨论(解决方案)
你说的是垂直居中吧、行表の高さと行高の配置は同じです、例：高さ:35px ; 行の高さ: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> 直接放体里formbox 可以不要