Archive for the ‘CSS’ Category

Centering images and text inside an li or div

Tuesday, November 18th, 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>

Getting rid of spaces between LIs in IE

Tuesday, November 18th, 2008

Took a bit of research, but the only way I could get rid of all the space between LIs in IE was to make the LI inline and the anchor tag within the LI a block like this:

.some-class li {
  display: inline;
}

.some-class li a {
  display: block;
}