如何定位<fieldset>标签？

Question

I want to put the fieldset on Center .我想把fieldset放在Center 上。

Html code: 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>

Is there any possible way to do it other than using center tag?除了使用center标签之外，还有什么可能的方法吗？

Answer 1

Just add the text-align and margin to you fieldset.只需将text-align和margin添加到您的字段集。 This will produce the same results as your code without the <center> tag.这将产生与没有<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

You need to target the input itself rather than the fieldset , as the input has text-align: start by default.您需要针对input本身而不是fieldset ，因为默认情况下input具有text-align: start 。 What you're looking for is:你要找的是：

fieldset input {
  text-align: center;
}

To align the fieldet itself , it behaves a little differently, as it is a block element, rather than text.为了对齐 fieldet本身，它的行为有点不同，因为它是一个块元素，而不是文本。 To align a block element centrally, you need to give it margin: auto .要居中对齐块元素，您需要给它margin: auto 。 This can also be used with images (or any other element) by explicitly defining them as a block element with display: block :这也可以与图像（或任何其他元素）一起使用，方法是将它们显式定义为带有display: block的块元素：

fieldset {
  margin: auto;
}

Keep in mind that margin: auto is stating that all four margins should have automatic offsets (centralised).请记住， margin: auto表示所有四个边距都应具有自动偏移量（集中式）。 That includes the top and bottom margins.这包括顶部和底部边距。 You can align just the left and right margins with shorthand margin: 0 auto .您可以仅将左右边距与速记margin: 0 auto 。

Updated code:更新代码：

 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>

Hope this helps!希望这可以帮助！

如何定位<fieldset>标签？

问题描述

2 个解决方案

解决方案1
1 2017-01-26 22:10:44

解决方案2
1 已采纳 2017-01-26 22:10:48

如何定位<fieldset>标签？

问题描述

2 个解决方案

解决方案1 1 2017-01-26 22:10:44

解决方案2 1 已采纳 2017-01-26 22:10:48

解决方案1
1 2017-01-26 22:10:44

解决方案2
1 已采纳 2017-01-26 22:10:48