垂直对齐img和li中的文本

Question

I am trying to vertically align to the middle both an image and some text within a list element but having no luck.

eg:

<ul>
 <li><img src="somepath" /> sometext
  </li>
<li><img src="somepath2" /> sometext2
  </li>
</ul>

how can i do it? thanks

Answer 1

Assuming your list items have a fixed height, you can use line-height combined with vertical-align: middle to do this.

Example:

ul li {
    display: block;
    height: 100px;
    line-height: 100px;
}

ul li img {
    vertical-align: middle;
}

Working example here.

Answer 2

You should be able to use the CSS property "vertical-align" for the img tag. Example:

<style type="text/css">
  img { vertical-align: middle; }
</style>
<ul>
  <li><img src="test.jpg" />test</li>
</ul>

Answer 3

You should wrap text within "li"

<li><div><span>My text</span></div></li>

li div{
    display: table;
    height: 100%;
    width: 100%;
}
li span{
    display: table-cell;
    vertical-align: middle;
}

Answer 4

Following on from the above answers that suggest the line-height method for vertical centering. If you apply a font that has glyphs that aren't vertically centered in the font file then the result will be that your element won't be vertically centered either, but be positioned higher or lower than it should be.

I had this issue and was tricky to work out. If your element doesn't vertically align correctly and you can't work out why, try applying a standard font such as 'Arial'.

See here for more information.

Answer 5

If you know the height of the image (assuming it is an icon), you can set the line height to the height of the image. Then it should work by setting vertical-align:middle . See a live example at w3schools: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align