html - 使用 CSS 将字段集居中

Question

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

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

无论窗口大小如何，我都希望字段集在窗口中居中。float: center谷歌搜索没有产生任何有用的信息，例如align: center属性。

score 25 · Accepted Answer

没有float: center，只有左右。浮动只是允许块级元素通过将它们从堆栈流中取出来水平排列。它类似于，display:inline-block除了它将它们与浮动的方向对齐。

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

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

score 4 · Accepted Answer

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

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

form
{
    text-align: center;
}

score 1 · Accepted Answer

只需删除float:left和添加margin: 0 auto;，因为float:left将您的元素保留在父元素的左侧。（假设父元素宽度超过 400 像素；）您的新 css 如下所示。

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

score 0 · Accepted Answer

你也可以fieldset这样写：

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

注意：这也会影响fieldset文本的对齐方式，所以如果你想让里面的文本fieldset左对齐或右对齐，你可以使用：

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

score -1 · Accepted Answer

有人试试这个......实际上，只需使用它，因为它有效！

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

5 回答 5