CSS: vertical align the text in li item , doesn't work

css, image

Solution

A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the "bullet" (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the "bullet" image.

Here's the fiddle: http://jsfiddle.net/huBpa/1/

body {
  background-color: #464443;
  color: white;
}

 ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 li {
   background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
   line-height: 32px;
   vertical-align: middle;
   padding-left: 40px;
 }​

Problem

I use a list-style-image for li items , and a single-line text. But it looks bad, so I want to vertically align the text to the middle of the image. I should use vertical-align: middle , right ? But it didn't work for me. ``` <html> <head> <title> This is an demo </title> <style> body { background-color: #464443; color: white; } ul { list-style-image: url('bg.png'); } li { vertical-align: middle; } </style> </head> <body> <ul> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> </ul> </body> </html> ```

Original source