ul li文本垂直对齐比垂直中心略低

Question

我有一些麻烦要把文字放在ul li中，比垂直对齐的中心要低一些。 我的代码位于jsFiddle

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

谢谢。

<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>

Answer 1

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

问题是您无法指定将应用的保证金。

（您也可以将<sub>标记加倍以增加此边距，但它开始非常难看）

Answer 2

我已根据您的要求使用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/

我希望你看起来像......

Answer 3

尝试这个

super-ul li.test {position：relative;顶部：10px的;}

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