I want to center divs, something like:
<div style='width:100%;'>
<div style='float:left; width=40px; height=40px;'></div>
<div style='float:left; width=40px; height=40px;'></div>
<div style='float:left; width=40px; height=40px;'></div>
...
</div>
While I want the child divs to be floated so they appear on the same row, I'd like them to be centered within the row horizontally. As more divs are added, they might need to eventually wrap onto another line, which is fine. But I'd like those items to be centered too. Something like:
| |
| X X X X X X |
| X X |
so in the above, enough child divs were added that the first line is completely full, then the two additional ones wrap onto another line but get centered themselves too.
What's the right style to apply here?
Thanks
display: inline-block
springs to mind, but I'm not sure how centering would work in that case.=
rather than:
...