Question

我想将字段集放在中心上。

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>标记的代码相同的结果。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

fieldset input {
  text-align: center;
}

要对齐fieldet 本身，它的行为略有不同，因为它是一个块元素，而不是文本。要集中对齐块元素，您需要给它margin: auto。这也可以与图像（或任何其他元素）一起使用，通过display: block明确地将它们定义为块元素：

fieldset {
  margin: auto;
}

请记住，margin: auto表示所有四个边距都应具有自动偏移（集中）。这包括顶部和底部边距。您可以使用速记margin: 0 auto对齐左右边距。

更新的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

如何定位<fieldset>标签？

2 个答案: