[英]how to positioning <fieldset> tag?
我想把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
标签之外,还有什么可能的方法吗?
只需将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>
您需要针对input
本身而不是fieldset
,因为默认情况下input
具有text-align: start
。 你要找的是:
fieldset input {
text-align: center;
}
为了对齐 fieldet本身,它的行为有点不同,因为它是一个块元素,而不是文本。 要居中对齐块元素,您需要给它margin: auto
。 这也可以与图像(或任何其他元素)一起使用,方法是将它们显式定义为带有display: block
的块元素:
fieldset {
margin: auto;
}
请记住, margin: auto
表示所有四个边距都应具有自动偏移量(集中式)。 这包括顶部和底部边距。 您可以仅将左右边距与速记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>
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.