Question

我试图将所有内容放在我的页面上，除了我创建的div之外，所有内容都居中。我不知道为什么。这是我的HTML：

<section>
    <div id="mydiv3">
        Get in Contact with the links below!
    </div>
</section>

这是css：

section{
    font-family: Helvetica, Arial, sans-serif; text-align:center;
}

#mydiv3{
    text-align:center;
    width: 200px;
    border-style:outset;
    border-width: 8px;
}

我遇到问题的div叫做mydiv3。

Answer 1

将margin: 0 auto;添加到您的＃mydiv3规则中。见JSFiddle

Answer 2

如果您将text-align: center应用于section元素，则会导致所有内联子元素居中，这就是您想要的。但是，由于#mydiv3是块元素，因此它不会受其父容器的text-align属性的影响。

另一方面，您是否将display: inline-block应用于#mydiv3，然后它会与中心对齐。

margin: 0 auto的工作原理如下，因为您还为#mydiv3指定了特定的宽度。

两种方法都有效。

Answer 3

在#mydiv3：

中尝试此操作

margin:auto;

请参阅此fiddle。

Answer 4

回答原因：
text-align会将您的文字与中心对齐，但div不会以其父项为中心。因此，您需要像其他人建议的那样设置保证金当然，一种替代方法是强制div与父级具有相同的宽度并使用text-align，它会起作用。但这有其自身的麻烦; width: 100%不能直接发挥作用。

Answer 5

这是一个可以用来帮助的链接。 http://designshack.net/articles/css/how-to-center-anything-with-css/
我亲自使用过

margin-right:auto;
margin-left:auto;

以div为中心。将其应用于您的＃mydiv3。希望这有助于

我的div不会居中

5 个答案: