[英]Center align a table vertically and horizontally
.cls_forgotpwd_container { font-family: sans-serif; font-size: 13px; width: 350px; /*margin: auto;*/ width: 350px; display: table-cell; vertical-align: middle; } .cls_forgotpwd_table label { margin-right: 10px; } .cls_forgotpwd_table input[type="password"] { width: 200px; height: 20px; border: 1px solid #555; } body { display: table; }
<div class="cls_forgotpwd_container"> <form class="cls_forgotpwd_form" id="forgotpwd_form"> <table class="cls_forgotpwd_table"> <tbody> <tr> <td><label>Password</label></td> <td><input type="password" name="password"></input></td> </tr> <td><label>Confirm Password</label></td> <td><input type="password" name="confirm_password"></input></td> <tr> <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td> </tr> <tr> </tr> </tbody> </table> </form> </div>
Doubts疑问
1) I tried display: table
and tabel-cell with vertical-align:middle
But it is not working in my scenario. 1)我试过display: table
和tabel-cell with vertical-align:middle
但它在我的场景中不起作用。 And this data is not tabular, so i don't think its a right way.而且这些数据不是表格,所以我认为这不是正确的方法。
2) I don't prefer position absolute
with top and left values in %
. 2)我不喜欢top and left values in %
使用top and left values in %
position absolute
。 If i don't get other options, I will go with this one.如果我没有其他选择,我会选择这个。
Is there any other possibilities to center align the div?是否还有其他可能使 div 居中对齐? Or Which one should i use in the above two options?或者我应该在上述两个选项中使用哪一个? If i have to choose option1, It's not working in my case.如果我必须选择选项 1,它在我的情况下不起作用。
I don't prefer margin
to center align this.我不喜欢margin
中心对齐这个。 And flex
is not supported by IE.并且 IE 不支持flex
。
margin:0 auto
with width:350px
successfully center aligned the div. margin:0 auto
和width:350px
成功地将 div 居中对齐。
Any Suggestions?有什么建议?
your code你的代码
body, html
- default - height: auto;
body, html
- 默认 - height: auto;
width: auto;
.cls_forgotpwd_container { font-family: sans-serif; font-size: 13px; width: 350px; /*margin: auto;*/ width: 350px; display: table-cell; vertical-align: middle; } .cls_forgotpwd_table label { margin-right: 10px; } .cls_forgotpwd_table input[type="password"] { width: 200px; height: 20px; border: 1px solid #555; } body { display: table; border: 2px solid #f00; }
<div class="cls_forgotpwd_container"> <form class="cls_forgotpwd_form" id="forgotpwd_form"> <table class="cls_forgotpwd_table"> <tbody> <tr> <td><label>Password</label></td> <td><input type="password" name="password"></input></td> </tr> <td><label>Confirm Password</label></td> <td><input type="password" name="confirm_password"></input></td> <tr> <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td> </tr> <tr> </tr> </tbody> </table> </form> </div>
so that would be centered necessary for body
and html
add - height: 100%
and width: 100%
所以这将是body
和html
add 所必需的居中 - height: 100%
和width: 100%
html, body { margin: 0; padding: 0; width: 100%; height: 100%; box-sizing: border-box; display: table; border: 3px solid #f00; } .cls_forgotpwd_container { font-family: sans-serif; font-size: 13px; width: 350px; border: 1px solid #ccc; display: table-cell; vertical-align: middle; text-align: center; } .cls_forgotpwd_container form{ display: inline-block; border: 1px solid #ccc; } .cls_forgotpwd_table label { margin-right: 10px; } .cls_forgotpwd_table input[type="password"] { width: 200px; height: 20px; border: 1px solid #555; }
<div class="cls_forgotpwd_container"> <form class="cls_forgotpwd_form" id="forgotpwd_form"> <table class="cls_forgotpwd_table"> <tbody> <tr> <td> <label>Password</label> </td> <td> <input type="password" name="password"></input> </td> </tr> <td> <label>Confirm Password</label> </td> <td> <input type="password" name="confirm_password"></input> </td> <tr> <td> <input class="cls_submit" type="submit" name="submit" value="Change It"></input> </td> </tr> <tr></tr> </tbody> </table> </form> </div>
It can be done easily with CSS transform
, browser support: IE9+使用 CSS transform
可以轻松完成,浏览器支持: IE9+
.cls_forgotpwd_container {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
If you do need to support IE8+ here it is, see the comments inline.如果您确实需要在此处支持IE8+ ,请参阅内联注释。
html, body, .cls_forgotpwd_container {
height: 100%; /*make all the contaniers to 100% height*/
}
body {
margin: 0; /*reset default margin*/
}
.cls_forgotpwd_container {
display: table;
margin: 0 auto; /*horizontally center itself*/
}
.cls_forgotpwd_form {
display: table-cell;
vertical-align: middle; /*vertically center things inside*/
}
There is a small issue should be corrected - <input>
is self-closing tag.有一个小问题应该更正 - <input>
是自闭合标签。
This is wrong <input></input>
这是错误的<input></input>
This is correct <input>
or <input/>
这是正确的<input>
或<input/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.