html - 使用图像时使文本在 li 和 ul 标签中垂直居中

Question

我试图在使用

元素符号点时将文本与图像垂直居中，但我每次都看到元素符号点和文本被推到底部(即 jsfiddle link )。

我现在有这个 HTML(没有 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>

我想要完成的是这个(PNG 模型):

Answer 1

使用垂直对齐:一个 img {vertical-align:middle;} http://jsfiddle.net/ZDBW8/2/