Vertical Aligned Text and Image in list

问题

Is there a way of vertical aligning text and an image in a list?

e.g.

<li>Some text here <img src="image.jpg" alt="" /></li>

The text doesn't align in the middle of the side of the image, it appears at the bottom then the image is next to it. I need the text to be in the center point between the image on the side.

What's the best way of doing it? I know having a image inside a list isn't valid HTML (AFAIK).

Thanks :)

回答1:

You can use

li img {vertical-align: middle;}

if text fits one line

回答2:

If the text doesn't wrap, you can set line-height same as the height of image:

li { line-height: 42px }

And yes, having img inside li is perfectly valid, since img is (by default) inline element while li is block level element.

来源：https://stackoverflow.com/questions/2716490/vertical-aligned-text-and-image-in-list