如何定位<fieldset>标签？

Question

我想将 fieldset 放在 Center 上。

Html代码：

<html>
<head>
  <style>
    body {
      background-color: #f42b68;
      width: 100%;
    }
    fieldset {
      height: 50%;
      width: 80%;
      background: #ffffff;
    }
  </style>
</head>
<body>
  <center>
    <fieldset>
      <form>
        <input type="text" placeholder="txt">
      </form>
    </fieldset>
  </center>
</body>
</html>

除了使用 center 标签之外，还有其他方法吗？

Answer 1

只需将 text-align 和 margin 添加到您的字段集中。这将产生与没有 <center> 标记的代码相同的结果。

body
{
    background-color: #f42b68;
    width: 100%;
}
fieldset
{
    height: 50%;
    width: 80%;
    background: #ffffff;
    text-align:center;
    margin:auto;
}

<body>

<fieldset>
    <form>
    <input type="text" placeholder="txt">
    </form>
</fieldset>

</body>

Answer 2

您需要定位 input 本身而不是 fieldset，因为 input 默认具有 text-align: start。您正在寻找的是：

fieldset input {
  text-align: center;
}

为了对齐字段自身，它的行为有点不同，因为它是块元素，而不是文本。要居中对齐一个块元素，你需要给它margin: auto。这也可以通过使用 display: block:

将它们明确定义为块元素来与图像（或任何其他元素）一起使用

fieldset {
  margin: auto;
}

请记住，margin: auto 表示所有四个边距都应具有自动偏移量（集中）。这包括顶部和底部边距。您可以仅将左右边距与 shorthand margin: 0 auto.

对齐

更新代码：

body {
  background-color: #f42b68;
  width: 100%;
}
fieldset {
  height: 50%;
  width: 80%;
  background: #ffffff;
  margin: auto;
  text-align: center;
}
fieldset input {
  text-align: center;
}

<body>
  <fieldset>
    <form>
      <input type="text" placeholder="txt">
    </form>
  </fieldset>
</body>

希望对您有所帮助！

如何定位<fieldset>标签？

how to positioning <fieldset> tag?

html

css

css-position

fieldset

web