Html 使用 CSS 将字段集居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7898072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a field set with CSS
提问by Chris
I'm trying to center a fieldset containing the login "username" and "password" fields to the center of the page. Here is what I have:
我试图将包含登录“用户名”和“密码”字段的字段集居中到页面的中心。这是我所拥有的：
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
float: left;
}
I want the fieldset to be centered in the window, regardless of window size. Googling produced nothing helpful, such as float: centeror align: centerattributes.
无论窗口大小如何，我都希望字段集在窗口中居中。谷歌搜索没有产生任何有用的东西，例如float: center或align: center属性。
回答by AlienWebguy
There is no float: center, only left and right. Float simply allows block level elements to line up horizontally by taking them out of their stack flow. It's similar to display:inline-blockexcept it aligns them to the direction of the float.
没有float: center，只有左右。Float 只是允许块级元素通过将它们从堆栈流中取出来水平排列。它类似于，display:inline-block除了它将它们与浮动的方向对齐。
What you want is to set the margins to auto. If you want to center align the nodes insidethe fieldset, you can add text-align:center;to this:
您想要的是将边距设置为自动。如果你想中心对齐节点里面的fieldset，你可以添加text-align:center;到这一点：
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin:auto;
}
回答by Doozer Blake
The element wrapping it likely needs text-align: center; on it, and then you need to set the margins on the fieldset;
包裹它的元素可能需要 text-align: center; 在它上面，然后你需要在字段集上设置边距；
fieldset{
//other stuff
margin: 0 auto;
text-align: left;
}
form
{
text-align: center;
}
Sample: http://jsfiddle.net/CKqxQ/
回答by Rudresh Bhatt
just remove float:leftand add margin: 0 auto;because float:leftkeeps your element to left of the parent element. (Assuming parent element width is more than 400px;) your new css would be as below.
只需删除float:left并添加，margin: 0 auto;因为float:left将您的元素保留在父元素的左侧。（假设父元素宽度超过 400 像素；）您的新 css 将如下所示。
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin: 0 auto;
}
回答by Ahmed
You can also put the fieldsetlike that:
你也可以fieldset这样写：
<div style="text-align:center">
.......fieldset here........
</div>
Note: This affects also the alignment of the fieldsettext, so if you want the text inside the fieldsetto be aligned left or right, you can use:
注意：这也会影响fieldset文本的对齐方式，所以如果你想让里面的文本fieldset左对齐或右对齐，你可以使用：
<fieldset style="text-align:left">
回答by Ukheby
Someone try this... actually,just use this coz it works!
有人试试这个……实际上，就用这个吧，因为它有效！
fieldset {
font-size:14px; padding:5px; width:500px; line-height:1.8; margin: 0 auto;
}
