在保持内容和演示文稿分离的同时，是否有可能将表格居中？ [英] Is it possible to center a form while maintaining separation of content and presentation?
问题描述
EDIT 5/21/13 13:40 EST ：添加了 inline-block 样式。
考虑以下页面：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< style>
form {display：inline-block; }
< / style>
< title>登入< / title>
< / head>
< body>
< form action =/ loginmethod =post>
< label for =username>用户名：< / label>< input type =textname =usernameid =username>
< label for =password>密码：< / label>< input type =passwordname =passwordid =password>
< input type =submitvalue =登录>
< / form>
< / body>
< / html>
有没有什么方法可以在CSS中居中表单而不用
- 在引导网格中添加额外的div
- 猜测表单的宽度将以百分比或px为单位
$ b基本上，我希望包含表单的块的宽度然后让该块的中心与页面的中心对齐。
解决方案重新寻找是
display：table，而不是display：inline-block。两种显示类型都具有您要查找的缩小到适合行为，但table允许您使用边距进行居中。 p>
http://cssdeck.com/labs/slpqdfct
表格{
display：table;
margin：0 auto;
}
EDIT 5/21/13 13:40 EST: Added
inline-blockstyling.Considering the following page:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> form { display: inline-block; } </style> <title>Log in </title> </head> <body> <form action="/login" method="post"> <label for="username">Username: </label><input type="text" name="username" id="username"> <label for="password">Password: </label><input type="password" name="password" id="password"> <input type="submit" value="Log in"> </form> </body> </html>Is there any way in CSS to center the form without
- Adding extra divs à la the bootstrap grid
- Guessing what the width of the form will be in percentage or px
- Center-aligning the text inside the form
Basically, I want the block that contains the form to have its width determined automatically by its contents, then have the center of that block lined up with the center of the page.
解决方案What you're looking for is
display: table, notdisplay: inline-block. Both display types have that shrink to fit behavior you're looking for, buttableallows you to use margins for the purpose of centering.http://cssdeck.com/labs/slpqdfct
form { display: table; margin: 0 auto; }这篇关于在保持内容和演示文稿分离的同时，是否有可能将表格居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
