为什么CSS不会将`div`元素居中？

Question

Why doesn't this CSS center the container div ?

The JSFiddle is here (ignore the random JQuery):

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

Here's the "preview":

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

Answer 1

Because it doesn't have a defined width (and is 100% wide by default so it is centered).

You can either explicitly set the width to be the width of the blocks combined, or you can set the .container to inline-block and have it's container use text-align: center .

body {
  text-align: center;
}

.container{
  display: inline-block;
}

Demo

Note: I've put text-align: center on the body for demo purposes. In reality, I'd suggest adding another container <div> so you don't have your entire body text-aligned to the center.

Answer 2

since you are using display: block , you can use text-align:center; to center the elements

UPDATED FIDDLE

Answer 3

Just give width to the div. Calculate the total width it will take for the inner boxes and set the with to the div. If you dont want to give it a width then search for the Table layout options for div.

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

Just check this jsFiddle http://jsfiddle.net/shinde87sagar/7SW3L/26/

Answer 4

It is not happening because you have not given width to .container . By default, div takes 100% width. You need to either give width to .container or give it text-align:center as inside .container your divs are inline.

DEMO using width here.

DEMO using center here.

Answer 5

YOUR EXAMPLE REVISED HERE * ^{Read my comments}

DEMO

You had some issues:

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

Or simply use

.container{
  text-align:center;
}

DEMO

Answer 6

Add following.

.container{
 text-align: center;
}