Question

为什么以下似乎什么都不做？

    <style>
    form {
        margin-left:auto;
        margin-right:auto;
    }
    h1 {
        margin-left:auto;
        margin-right:auto;
        color : #2265FF;
    }
    </style>
<body>
<h1>Please type in the text to be converted!</h1>
<form> ... </form>

显然，我还有更多HTML可供选择。

在CSS3中有更好的方法吗？

谢谢！

Answer 1

您最好使用text-align:center，因为<form>和<h1>默认会将其宽度设置为100%。

Answer 2

在CSS3中你可以这样做：

form, h1 {
    display: table;
    margin: 0 auto;
}

如果要支持旧版浏览器，则需要指定宽度：

form, h1 {
    width: 500px
    margin: 0 auto;
}

但如果将它应用于父容器，它实际上会更好......

.container {
    margin: 0 auto;
    width: 500px;
}

<div class="container">
  <h1></h1>     
  <form></form>
</div>

CSS中的对齐/边距

2 个答案: