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 withwidth: 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. Usedisplay: inline-block
to be able to display elements inline, but with the ability to provide size (as opposed todisplay: inline
where width/height are ignored)
To achieve what you are trying to do:
Consider using display: inline-block
instead of float
.