3

変更できない次の HTML 出力があります。これらは 2 つのリンクで、1 つはテキスト リンク、もう 1 つは画像です。

問題は、画像がテキストよりも少し高い位置に表示されることです。画像の中央にテキストを配置しようとしていますが、成功していません。

とを画像padding-topに設定しようとしましたが、どれも機能していないようです。どんな助けにも感謝します。margin-topvertical-align

HTML:

<p>
    <a href="#" class="link">
        <img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg">
    </a>
    <a href="#" class="link">my title</a>
</p>

CSS:

.link img{
   margin-top: 5px;   
}

JSFiddle: http://jsfiddle.net/e3vnQ/

4

3 に答える 3

4

display: inline-blockとを使用してみてくださいvertical-align: middle：http://jsfiddle.net/e3vnQ/7/

于 2012-08-22T07:59:16.763 に答える
1

あなたはこのようにcssを書くことができます：-

anchorタグが入るときpタグはvertical-align:middle;下記のcssを通過し続けます

p{
    font-size: 12px;
    border: 1px solid red;

}
p a {
    display:inline-block;
    vertical-align:middle;

}
.link img{
   margin-top: 5px;    
}

またはデモを参照してください：-http：//jsfiddle.net/e3vnQ/13/

于 2012-08-22T08:07:48.467 に答える
1

追加align="top"

<p>
    <a href="#" class="link">
        <img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg" align="top">
    </a>
    <a href="#" class="link">my title</a>
</p>

CSS:

.link img{
   margin-top: 5px;   
}
于 2012-08-22T07:59:10.823 に答える