1

div次のスタイルが適用されていると仮定します。

div {
    border: 1px solid #000;
    padding-left: 35px;
    position: relative;
}

これに疑似要素divを適用します。:beforeその疑似要素のコンテンツは画像です。

div:before {
    content: url(someImage.png);
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 30px;
    height: 100%;
}

の高さdivは動的です。生成されたコンテンツの一部である画像を垂直方向に中央揃えにする方法はありますか？

これが例のあるフィドルです。

line-heightの高さがわからないので使えませんdiv。生成されたコンテンツの背景色がを超えて拡大するため、マージンやパディングを使用できませんdiv。答えは「いいえ」だと思いますが、マークアップをたくさん変更する前に、ここで質問する価値があると思いました。

4

1 に答える 1

8

これは通常のインラインタグのCSSバージョンにすぎないため、理論的には可能であるはずですが、<img>それはそのフォーマット（および場合によっては生成要素のフォーマット）に大きく依存します。

簡単にするために、代わりに背景画像にし、コンテンツに空の文字列を使用します。

div:before {
    content: '';
    background: #ccc url(someImage.png) center center no-repeat;
    position: absolute;
    left: 0;
    width: 30px;
    height: 100%;
}

生成された領域を適切にカバーする灰色の背景がすでにあるという事実を利用していることに注意してください。画像をその灰色の背景の中央に配置するだけです。

更新されたフィドル

于 2012-06-21T10:56:55.050 に答える