« Getting rid of spaces between LIs in IE | Main | Writing a marker interface in C++ »

Centering images and text inside an li or div

Posted by: Brian Pontarelli on 11/18/2008

Found a good fix for this one as well. This will work on LIs or DIVs. Here’s how to do this in IE and FireFox:

li {
  display: inline;
  text-align: center;
}

li img {
  display: block;
  margin: auto;
}

The HTML looks like this:

<ul>
  <li><img src="..."/>Some text</li>
  <li><img src="..."/>Some text</li>
</ul>

Brian Pontarelli's complete blog can be found at: http://brian.pontarelli.com

About Brian Pontarelli

Brian Pontarelli is the founder and president of Inversoft, a Colorado based software company. In addition to Inversoft, Brian works on many open source projects including Struts, Savant and Java.net commons. In the past, he was the president of the Chicago Java User Group and an enterprise architect for Orbitz.

Brian has been programming for many years and works primarily with Java and Ruby. He has published various articles in both print and online magazines about Java, J2EE security, Java Server Faces and NIO.

More About Brian »