为什么这个CSS不是`div`元素？

Question

为什么这个CSS中心不是容器div？

JSFiddle在这里（忽略随机JQuery）：

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

这是＆＃34;预览＆＃34;：

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

Answer 1

因为它没有定义的宽度（默认情况下为100％宽，所以它居中）。

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

body {
  text-align: center;
}

.container{
  display: inline-block;
}

<强> Demo

注意：我已将text-align: center放在body上以进行演示。实际上，我建议添加另一个容器<div>，这样就不会将整个正文与中心对齐。

Answer 2

由于您使用的是display: block，因此您可以使用text-align:center;将元素置于中心

<强> UPDATED FIDDLE

Answer 3

给div增加宽度。计算内盒所需的总宽度，并将with设置为div。 如果你不想给它一个宽度，那么搜索div的表格布局选项。

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

请检查这个jsFiddle http://jsfiddle.net/shinde87sagar/7SW3L/26/

Answer 4

没有发生，因为你没有给.container宽度。默认情况下，div的宽度为100％。您需要为.container指定宽度，或者将text-align:center作为内部.container内的div设置。

DEMO using width here.

DEMO using center here.

Answer 5

YOUR EXAMPLE REVISED HERE * ^{Read my comments}

<强> DEMO

你遇到了一些问题：

.container{
  width:758px;        /* Set a width */
  /* display:block */ /* DIVs ARE ALREADY BLOCK LEVEL ELEMENTS */
  margin: 0 auto;
}

或者只是使用

.container{
  text-align:center;
}

<强> DEMO

Answer 6

添加以下内容。

.container{
 text-align: center;
}