ul li文本垂直对齐方式比垂直中心低一点

Question

我遇到了一些麻烦，无法将文本放在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>

Answer 1

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

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

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

Answer 2

我已经为您的需求使用了nth-childCSS选择器

请参阅更新的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测试｛位置：相对；顶部：10px；｝

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