Home » Html » vertical align img and text within li

vertical align img and text within li

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

Answers:

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.

Questions:
Answers:

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>

Questions:
Answers:

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

Questions:
Answers:

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;
}