I have a footer made up of a few lists. I put each list in a div, and floating them so that the lists are horizontally next to each other. The text in each list is center aligned. Now I'd like to center align all those divs! How can I do this? They are wrapped in a footer tag, but since the divs are floating, text-align:center; won't work. Any ideas? Thanks!
My CSS looks like this right now:
.footer{
height:180px;}
footer li{
list-style-type:none;
padding:0.2em 1em 0.2em 1em;
text-align:center;}
.section{
float:left;
margin-bottom:2.5em;
padding-top:0.8em;
margin-left:2em;}
To center an element, it'll typically need margin: 0 auto as stated in another answer.
If you want more elements within your container to center within the container, you should not be floating them. Floating them takes them out of the layout flow. You'll just want to make them display: inline-block.
* {
padding: 10px;
text-align: center;
}
footer {
background: #ddd;
}
.item {
display: inline-block;
background: #999;
width: 20%;
}
Example: http://codepen.io/anon/pen/RKQJNa