css - 垂直配置疑似画像要素 (CSS)

Question

:beforeサイトのダウンロード リンクに小さな画像を追加するために疑似要素を使用しています。画像の高さが行の高さよりも大きく、画像の下部がテキストの下部に揃えられています。

擬似要素の垂直方向の配置を変更するにはどうすればよいですか? 理想的には、画像の中心がテキストの中心と一致するようにしますか?

Answer 1

テキストと画像の縮尺が狂っていない限り、これはほとんどの場合に機能することがわかりました。

#elem:before
{
    content: url(image.png);
    position: relative;
    bottom: -.5ex;
    margin-right: .5em;
}

はmargin-right、画像とテキストの間に少しスペースを置きます。

Answer 2

私はエレガントな解決策を見つけることができませんでした。これは、実用的なソリューションを備えた jsFiddle です。

http://jsfiddle.net/rcravens/pAcDE/

次の要素があるとします。

<div id='elem'>Bob Cravens</div>

私はこのCSSを持っています:

#elem:before{
    content: '';
    height: 160px;
    width: 136px;
    background: url('http://bobcravens.com/Content/images/author_thumb.png');
    position: absolute;
    top: 0px;
    left: 0px;
}
#elem{
    background-color: red;
    margin: 60px 136px;
}

:before は、'position: absolute' スタイルを除いて、おそらくあなたが持っているものです。次に、マージンを使用して元の div をオフセットしました。

お役に立てれば。

ボブ

Answer 3

画像inline要素を作成し、それに線の高さを設定し、コンテナに垂直方向の配置を設定します。