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

时间：2014-01-22 19:23:32

标签： html css

当我使用

  • 项目符号时，我正试图垂直居中带有图像的文本，但我看到每次点击点和文本被推到底部（即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模型）：

    enter image description here

    • 4 个答案:

    答案 0 :(得分：2)

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

    答案 1 :(得分：1)

    您可以在img元素上设置vertical-align:middle：

    EXAMPLE HERE 

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

    答案 2 :(得分：1)

    将Link 1, Link 2..更改为<p>Link 1</p>, <p>Link 2</p> ....

    之后，您需要将<img>定义为float:left，将<p>定义为margin-top: 15px

    我定义的边距没有任何意义......你需要检查你需要多少px。

    希望它有所帮助！

    答案 3 :(得分：0)

    将style="vertical-align:middle"添加到img标记。

     <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>
    相关问题
    最新问题