CODEWITHSUNDEEP
css
Travis
Travis

Reputation: 576

How do you vertically center a custom image in a <li> element across browsers?

The design for the website I am working on calls for a custom image on lists instead of a bullet. Using the image is fine, but I have been having difficulties ensuring that it is centered against the text of the list item across all browsers. Does anyone know of a standard solution for this?

Upvotes: 5

Views: 9795

Answers (3)

Dillie-O
Dillie-O

Reputation: 29725

Have you tried adding the following code in your CSS file?

li
{
   background-image: URL('custom.png');
   background-repeat: no-repeat;
   background-position: center;
}

Upvotes: 0

Bruce Clark
Bruce Clark

Reputation:

If you are referring to using a custom image bullet for your list this is the code you'll want to use, it will be vertically centered. I'm assuming here that the bullet image is 12px by 12px.

ul li {
  background: transparent url(/link/to/custom/bullet.gif) no-repeat 0 50%; 
  padding-left: 18px; 
}

The only problem with this is that sometimes on long multi-line list items it looks odd. In that case it might be best to assign the background position to a slight indent from the top and the left (i.e. no-repeat 0 7px).

cheers, Bruce

Upvotes: 9

dottwatson
dottwatson

Reputation: 1

set a specific line-height on the li element and a vertica align on the image.. worked for me 

li { height: 150px; line-height: 150px; }
li img { vertical-align: middle; }

and the HTML code

<li><img src="myimage.jpg" /></li>

if you want adapt the image to a custon size, preserving the ratio

li img { max-width: 150px; max-height: 150px; width: auto; height: auto; }

Upvotes: 0

Related Questions