Text align vertical within li

Question

<ul id = "Software">
   <li id = "pdf1"> <img src="/Content/img/pdf.png">Catalogue</li>
   <li id = "pdf2"> <img src="/Content/img/pdf.png">Manual Data</li>
   <li id = "pdf3"> <img src="/Content/img/pdf.png">Technical Data</li>
   <li id = "software1">Software</li>
</ul>

The text in the list elements is appearing at the bottom. How to center it alongside the image?

Answer 1

li img { vertical-align: middle; }

Answer 2

Demo jsBin

  ul li{
    list-style:none;
    display:inline-block;
    height:40px;
    line-height:40px;
  }
  li img{
    float:left;
    margin:5px;
  }

You need to set a height and same line-height for your li element;
for the containing images - set float : left

Answer 3

Set the same height and line-height. This will do the trick.

Answer 4

To align text and image, you can use margin-bottom:-5px on image element, the number depends on the size of your image.