Making text vertically centered in li and ul tags when an image is used

Question

I am trying to vertically center text with images when and

bullet points are used, but I am seeing the bullet point and the text get pushed to the bottom each time (ie jsfiddle link ).

I have this HTML at the moment (no CSS):

 <ul id="features-list"> <li><a href="#1"><img class="alignnone size-full wp-image-2716" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66">Link 1</a></li> <li><a href="#2"><img class="alignnone size-full wp-image-2717" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66">Link 2</a></li> <li><a href="#3"><img class="alignnone size-full wp-image-2718" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66">Link 3</a></li> <li><a href="#4"><img class="alignnone size-full wp-image-2719" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66">Link 4</a></li> </ul> 

What I am trying to accomplish is this (PNG mockup):

Answer 1

使用vertical-align： a img {vertical-align:middle;} http://jsfiddle.net/ZDBW8/2/

Answer 2

You would set vertical-align:middle on the img elements:

EXAMPLE HERE

#features-list li a img {
    vertical-align: middle;
}

Answer 3

Change Link 1, Link 2.. to <p>Link 1</p>, <p>Link 2</p> ....

After that you will need to define the <img> as float:left and the <p> as margin-top: 15px

The margin that I have defined doesn't have any sense... you will need to check how much px you will need.

Hope it helps!

Answer 4

Add style="vertical-align:middle" to you img tag.

 <ul id="features-list">
        <li><a href="#1"><img class="alignnone size-full wp-image-2716"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66" style="vertical-align:middle"><span>Link 1</span></a></li>
    <li><a href="#2"><img class="alignnone size-full wp-image-2717"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66" style="vertical-align:middle">Link 2</a></li>
    <li><a href="#3"><img class="alignnone size-full wp-image-2718"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66" style="vertical-align:middle">Link 3</a></li>
    <li><a href="#4"><img class="alignnone size-full wp-image-2719"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/R68A_B_train.JPG/100px-R68A_B_train.JPG" width="66" height="66" style="vertical-align:middle">Link 4</a></li>
    </ul>