html - 为什么这个 CSS 没有将 `div` 元素居中？

Question

为什么这个 CSS 不使容器 div 居中？

JSFiddle 在这里(忽略随机的 JQuery):

http://jsfiddle.net/evamvid/7SW3L/20/

这是“预览”:

jsfiddle.net/evamvid/7SW3L/20/embedded/result/

Answer 1

因为它没有定义的宽度(默认情况下是 100% 宽，所以它居中)。

您可以将宽度显式设置为组合 block 的宽度，也可以设置 .container至 inline-block并使用它的容器 text-align: center .

body {
  text-align: center;
}

.container{
  display: inline-block;
}

Demo

注意:我输入了text-align: center在 body 上用于演示目的。实际上，我建议添加另一个容器 <div>所以您没有将整个正文文本对齐到中心。