使用 CSS 将字段集居中

发布于 2024-12-12 02:55:33 字数 264 浏览 0 评论 0原文

我试图将包含登录“用户名”和“密码”字段的字段集居中到页面的中心。这就是我所拥有的:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  float: left;
}

我希望字段集在窗口中居中,无论窗口大小如何。谷歌搜索没有产生任何有用的东西,例如 float: centeralign: 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

太阳哥哥 2024-12-19 02:55:33

没有 float: center,只有 left 和 right。浮动只是通过将块级元素从堆栈流中取出来允许它们水平排列。它与 display:inline-block 类似,只不过它将它们与浮动方向对齐。

您想要的是将边距设置为自动。如果您想要将 fieldset 内的节点居中对齐,您可以添加 text-align:center; 到此:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}

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-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 add text-align:center; to this:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}
糖果控 2024-12-19 02:55:33

包裹它的元素可能需要 text-align: center;就可以了,然后你需要在fieldset上设置边距;

fieldset{
  //other stuff
  margin: 0 auto;
  text-align: left;
}

form
{
    text-align: center;
}

示例: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;

fieldset{
  //other stuff
  margin: 0 auto;
  text-align: left;
}

form
{
    text-align: center;
}

Sample: http://jsfiddle.net/CKqxQ/

昔梦 2024-12-19 02:55:33

只需删除 float:left 并添加 margin: 0 auto; 因为 float:left 使您的元素保持在父元素的左侧。 (假设父元素宽度超过 400px;)您的新 css 将如下所示。

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin: 0 auto;
}

just remove float:left and add margin: 0 auto; because float: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{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin: 0 auto;
}
平安喜乐 2024-12-19 02:55:33

您还可以像这样放置 fieldset

<div style="text-align:center">
    .......fieldset here........
</div>

注意:这也会影响 fieldset 文本的对齐方式,因此如果您希望将文本放在 fieldset 内> 要左对齐或右对齐,您可以使用:

<fieldset style="text-align:left">

You can also put the fieldset like that:

<div style="text-align:center">
    .......fieldset here........
</div>

Note: This affects also the alignment of the fieldset text, so if you want the text inside the fieldset to be aligned left or right, you can use:

<fieldset style="text-align:left">
南笙 2024-12-19 02:55:33

有人尝试这个......实际上,只要使用这个,因为它有效!

fieldset {
  font-size:14px;    padding:5px;    width:500px;    line-height:1.8;    margin: 0 auto;    
 }

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;    
 }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文