【问题标题】：ul li text vertical alignment a bit lower than vertical centerul li 文本垂直对齐略低于垂直中心
【发布时间】：2012-08-15 13:17:05
【问题描述】：

我在将 ul li 中的文本放置在比中心垂直对齐低一点的位置时遇到了一些麻烦。我的代码在jsFiddle

我希望它是相同的，在大多数浏览器中看起来都一样，但文本比实际低 10 像素。

谢谢。

<style>
#super-ul
    {
        list-style-type : none;
        padding-top     : 0;
        overflow        : hidden;
        float           : left;
    }

#super-ul li
    {
        display       : inline-block;
        border:1px solid red;
    }

#super-ul li img
    {
        vertical-align : middle;
    }

</style>

<ul id="super-ul">
<li><a href="#"><img src="http://www.google.by/images/icons/product/chrome-48.png" alt=""></a></li>
<li><div><a href="#">This text should be valigned center but 10px down</a></div></li>
</ul>

【问题讨论】：

标签： html css html-lists vertical-alignment

【解决方案1】：

不完全是您正在搜索的解决方案，但您可以使用 <sub> 标记，并调整字体大小。

问题是您无法指定将应用的边距。

（你也可以将<sub>标签加倍来增加这个边距，但它开始很丑）

【讨论】：

【解决方案2】：

试试这个

super-ul li.test{ 位置：相对；顶部：10px;}

只需将此 li 应用于特定的 li

【讨论】：

【解决方案3】：

我已根据您的要求使用了nth-child CSS 选择器

查看更新后的CSS

#super-ul
    {
        list-style-type : none;
        padding-top     : 0;
        overflow        : hidden;
        float           : left;
    }
    #super-ul li
    {
        display       : inline-block;
        border:1px solid red;

    }
        #super-ul li:nth-child(2n)
    {
        display       : inline-block;
        border:1px solid green;
        top:10px;
        position:relative;    
    }
    #super-ul li img
    {
        vertical-align : middle;
    }

查看演示：-

http://jsfiddle.net/8Ncmq/36/

希望你是这样的......

【讨论】：