2

ここにフィドルがあります：http： //jsfiddle.net/sAuhsoj/zSGLy/3/

リンクの画像を垂直方向に中央揃えにしようとしています。リンクには固定heightプロパティがあり、line-heightそれと等しくなるように設定されています。私は設定によって画像を垂直方向に中央に配置しようとしました。vertical-align: middle;これは以前に使用した手法ですが、必ずしもこの目的のためではありませんが、画像が低すぎるようです。なぜこれが起こっているのか理解できません。効果があるかもしれないが、関連のないCSSプロパティをすべて削除しましたが、ご覧のとおり、関連のないプロパティをすべて削除しても、画像は中央に移動しません。heightアンカー要素のandline-heightを20px（画像と同じ高さ）に設定し、画像がリンクの下部から突き出ている場合は、この問題をさらによく理解できます（ http://jsfiddle.net/sAuhsoj/zSGLyを参照）。 / 4 /）。

このリンクで画像を垂直方向に中央に配置するにはどうすればよいですか？

4

2 に答える 2

1

@udidu が提供する回答は、あなたの場合に有効です。ただし、画像が中央に表示されない主な理由は、にline-height適用される css プロパティが原因であることに注意する必要があります<a> .link。ここのコードの例http://jsfiddle.net/zSGLy/6/

誤って異なる cssline-heightプロパティを継承してしまった場合は、設定するソリューションをvertical-align:-5px毎回再確認して再調整する必要があります。

この問題に対処するには、いくつかの方法があります。

第1の方法

画像が本当に必要な場合は、垂直方向の配置を設定して、このように少しハックする必要があります。<span>これは、ミックスで別の要素を使用する必要があるため、必要がない場合は使用したくない方法の 1 つです。

line-height: 1;が重要です。ここのフィドルhttp://jsfiddle.net/zSGLy/8/

HTML:

<a href="javascript:void(0)" class="link">
    <span><img src="http://energenius.co.uk/dash/img/settingsIcon.png" /></span>
</a>

CSS:

.link {
    display: inline-table;
    background-color: red;
    height: 30px;

    /* just to make the problem more obvious */
    width: 100px;
    text-align: center;
    line-height: 30px;
}

.link > span {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    line-height: 1;
}

2番目の方法

コンテンツをプレゼンテーションから分離するという概念 (スタイルシートの目的) については、画像を背景画像として設定することをお勧めします。

例: http://jsfiddle.net/zSGLy/9/

CSS:

.link {
    display: inline-block;
    background-color: red;
    height: 30px;

    /* just to make the problem more obvious */
    width: 100px;
    text-align: center;

    /* bg image*/
    background-image: url(http://energenius.co.uk/dash/img/settingsIcon.png);
    background-repeat: no-repeat;
    background-position: center center;
}

HTML:

<a href="javascript:void(0)" class="link"></a>​

それが役に立てば幸い。

于 2012-10-11T17:50:27.807 に答える
0

試す

vertical-align: -5px;

結果は次のとおりです。

http://jsfiddle.net/zSGLy/5/

于 2012-10-11T16:47:20.677 に答える