使用 CSS 将字段集居中
我试图将包含登录“用户名”和“密码”字段的字段集居中到页面的中心。这就是我所拥有的:
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
float: left;
}
我希望字段集在窗口中居中,无论窗口大小如何。谷歌搜索没有产生任何有用的东西,例如 float: center
或 align: center
属性。
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: center
or align: center
attributes.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
没有
float: center
,只有 left 和 right。浮动只是通过将块级元素从堆栈流中取出来允许它们水平排列。它与display:inline-block
类似,只不过它将它们与浮动方向对齐。您想要的是将边距设置为自动。如果您想要将
fieldset
内的节点居中对齐,您可以添加text-align:center;
到此: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 todisplay:inline-block
except it aligns them to the direction of the float.What you want is to set the margins to auto. If you want to center align the nodes inside the
fieldset
, you can addtext-align:center;
to this:包裹它的元素可能需要 text-align: center;就可以了,然后你需要在fieldset上设置边距;
示例:http://jsfiddle.net/CKqxQ/
The element wrapping it likely needs text-align: center; on it, and then you need to set the margins on the fieldset;
Sample: http://jsfiddle.net/CKqxQ/
只需删除
float:left
并添加margin: 0 auto;
因为float:left
使您的元素保持在父元素的左侧。 (假设父元素宽度超过 400px;)您的新 css 将如下所示。just remove
float:left
and addmargin: 0 auto;
becausefloat:left
keeps your element to left of the parent element. (Assuming parent element width is more than 400px;) your new css would be as below.您还可以像这样放置
fieldset
:注意:这也会影响
fieldset
文本的对齐方式,因此如果您希望将文本放在fieldset
内> 要左对齐或右对齐,您可以使用:You can also put the
fieldset
like that:Note: This affects also the alignment of the
fieldset
text, so if you want the text inside thefieldset
to be aligned left or right, you can use:有人尝试这个......实际上,只要使用这个,因为它有效!
Someone try this... actually,just use this coz it works!