2

テキストを垂直方向の中央揃えよりも少し低い 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>
4

3 に答える 3

1

あなたが探している解決策とはまったく異なりますが<sub>、フォントの resize でタグを使用できます。

問題は、適用されるマージンを指定できないことです。

(<sub>タグを 2 倍にしてこのマージンを増やすこともできますが、非常に見苦しくなります)

于 2012-08-20T07:47:50.760 に答える
0

あなたの要件に合わせて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/

私はあなたがこのように見えることを願っています......

于 2012-08-20T10:25:35.470 に答える