How do you vertically center your own image in the <li> element in browsers?

Question

The design of the website I work for causes a custom image for lists instead of bullets. Using the image is fine, but I had difficulty getting it centered against the text of the list item in all browsers. Does anyone know of a standard solution for this?

Answer 1

If you reference the use of a custom image pool for your list, this is the code you want to use, it will be vertically centered. I assume the bullet image is 12 pixels by 12 pixels.

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

The only problem is that sometimes they look weird in long multi-line lists. In this case, it is best to assign the background position to a small indentation from the top and left (i.e., No-repeat 0 7px).

Greetings, Bruce

Answer 2

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

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

Answer 3

set a specific line height in the li element and vertical alignment on the image. Worked for me

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

and HTML code

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

if you want to adjust the image to the size of the caston, keeping the ratio

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