Question

我以前认为下面的两个代码块都会正确地居中一个div（当然，旧版浏览器存在一些问题）。第一种方法使用text-align: center，而第二种方法使用auto的左右边距。但是，下面的第一个代码块并不像我期望的那样使内部div居中。有什么想法吗？

＆＃13;

<div style="text-align: center; background-color: red;">
    <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue">Not working</div>
</div>

＆＃13;

以下代码确实以div为中心：

＆＃13;

<div style="background-color: red;">
  <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto">Works</div>
</div>

＆＃13;

这是我的JSFiddle

Answer 1

它是一个块级元素，它的位置不受text-align属性的影响。如果您将其设置为 display-inline ，则会有效。

<div style="text-align: center; background-color: red;">
    <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; display: inline-block;">It will work now</div>
</div>

Answer 2

居中的div有margin-left: auto和margin-right: auto，不起作用的div缺少任何边距。

请参阅此DEMO

在顶部框中，我添加了margin: 0 auto，这是：margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;

的简写

不能使用text-align：center来居中div

2 个答案: