このようなhtmlがある場合、中間イメージの上にテキストを縦に整列する方法。 1つの鉱石が2行のテキストであっても、テキストの流れが常に中間になるようにしたい。中間イメージのテキストの縦方向の整列
<div class="area-position">
<img src="image.jpg" alt="image" />
<a class="image-text" href="/link">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a>
</div>
複数の解決策が見つかりましたが、divの一部として画像がありませんでした。
何とかHTMLを生成する必要がありますか？
私は考えることができる2つの方法があります。
CSSを使用してドキュメントフローからイメージを切り離します。
div.area-position {
position:relative;
}
div.image-text {
position:absolute;
top:0;
left:0;
}
またはあなたのdivの背景として、あなたの画像を設定します。
div.area-position {
background:url('image.jpg') top left no-repeat;
}
あなたは、コンテナの幅と高さを指定する必要がありますいずれかの方法。
それは私の問題を解決するのに役立ちました。どうもありがとうございました。 – Navitua
ようこそ。私の答えは将来の参照のために受け入れられていることをマークしてください。 – PinkTurtle
あなたは、これが
世話をしてコーディング幸せに役立つもの
希望を揃える。これは、古いものとしばしば忘れられた表示方法が、中央には良い方法です
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
このサンプルコードを試すことができます
イメージでテキストオーバーレイを検索しましたか？あなたは***何千もの似たような質問をしたでしょう。 –
私はmutipleを見つけましたが、nonは垂直の中間オーバーレイを持っています。あなたの答えをありがとう。 – Navitua
あなたの質問は、主にテキストの垂直方向のセンタリングについて再構築する必要があります。再び***千の質問*** –