How can I horizontally align my divs?

Question

For some reason my divs won\'t center horizontally in a containing div:

相关标签:

Answer 1

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

Answer 2

Try this:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

DEMO

• having margin: 0 auto; along with width: 100% is useless because you element will take the full space.

• float: left will float the elements to the left, until there is no space left, thus they will go on a new line. Use display: inline-block to be able to display elements inline, but with the ability to provide size (as opposed to display: inline where width/height are ignored)

Answer 3

Although not covering this question (because you want to align the <div>s inside the container) but directly related: if you wanted to align just one div horizontally you could do this:

#MyDIV
{
    display: table;
    margin: 0 auto;
}