How can I horizontally align my divs?

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)


To achieve what you are trying to do:

Consider using display: inline-block instead of float.

Tags:

Css