Ran across this wonderfully efficient way of centering list items horizontally. Works great for the indicators below a carousel or a centered list of social icons. Compatible back to IE7.
ul { /* also works with ol */
width: 100%; /* or your desired width */
text-align: center; /* this will center the list items */
}
li {
display: inline-block; /* the key bit */
*display: inline; /* IE7 hack */
*zoom: 1; /* IE7 hack */
}That’s it!
Compatibility: IE7 and better browsers
Data Enhanced 
Where/how should this snippet be used; in the custom css file (as .ul and .li)? I tried it in the html file and I wasn’t sure where to place it since right after I am using a class=”bs-docs-social-buttons”> (below). I also tried in the CSS file with no luck.
I.E.
Attempting it in the CSS file lines up everything (I think) but the email entry field for a landing page is still skewed upwards. Thanks very much for the noob clarification.
Hi Chief — Does the jsfiddle on this help? http://jsfiddle.net/3Ezx2/3/
You’d write the CSS in your CSS file, and just need to update your CSS selectors to match your classes.
If you’re trying to center form fields, that would certainly be more complex. You might consider putting the key pieces of your problem in a jsfiddle, as it would be easiest for others to review and give feedback.
Yes, your example is illuminating. I am new to this tool and will give it a try. Thank you for the reference. My issue is having to align a set of twitter buttons, “bs-docs-social-buttons” within a container and then making sure it lines up with a separate email address field and a submit button on the same row. I thought so long as it is only items it would line up auto-magically. I’m sure it is just one or two small pieces of code in the wrong place. Looking forward to your new TB book as I am sure it will be as instructive and insightful as the first one. It really got me over the hump understanding the basics.
correction: the line should read ” I thought so long as it is only ‘list’ items”. i wrote the word ‘list’ in html code tag and the comments section didn’t reproduce it.
Just a quick note, sometimes it might seem that it’s not working. The reason perhaps is that you have li elements with a float property on it or the parent ul. So always remember. No float when center li elements within a ul/ol.
Thanks for this helpful note kennedy!
Useful solution,@Cochran
In chrome,it seems to work nice when center li elements within a “float” ul/ol.@kennedy
This worked perfectly well. Thanks,