Using list-style-image

[Fumigator]

I would like to display an unordered list using a 32x32 image for the marker. I can get it to work fine, except the text next to the marker will not align itself anywhere but along the bottom of the image. I want the text to vertically align in the middle of the image. I've tried "vertical-align: middle" but that will not work. It works if I apply it to a normal <img> element, but it will not work on my UL marker image.

I want to avoid using a table for this if possible... (in the olden days it would be a simple matter to create a 2-column table and align the <td>'s to my heart's content)

I could just put an <img> element inside the <li> element but then the text will wrap all funky around the image instead of staying indented to the right of the marker.

I could put the image in a div and float:left but again the text will wrap around it without the indentation which I want to avoid.

Any other options?

[felgall]

Just checked in "CSS: The Definitive Guide" and the only options that can affect the positioning of the marker relative to the text are part of the draft CSS3 specification and are yet to be implemented by any browser.

All current browsers will align the text to the bottom of the image and include a browser specific space between the image and the text.

[Arbitrator]

Any other options?Use a background image. You can see an example at http://www.jsgp.us/demos/cf114078.html.