上のようにレイアウトしたいです。
文字の行数が増えても常に、画像をテキスト部分の高さの中央に配置したいのですが、
もっともまとめて指定できる方法は何でしょうか?
できれば、一つ一つimgタグを使わずに、擬似要素にしたいです。
###発生している問題・エラーメッセージ
擬似要素にすると、table-cellやflexで揃いません。
行数ごとに、画像の位置をmarginで調整していますが、あまり効率的ではありません。
また、レスポンシブ用にも個別で調整しないといけない状況です。
###該当のソースコード
HTML
1 <div class="icon3 .adjust-3-line"> 2 <p>テキストテキストテキストテキストテキストテキスト</p> 3 <p>テキストテキストテキストテキストテキストテキスト</p> 4 <p>テキストテキストテキストテキストテキストテキスト</p> 5 </div> 6 7 <div class="icon2"> 8 <p>テキストテキストテキストテキストテキストテキスト</p> 9 <p>テキストテキストテキストテキストテキストテキスト</p> 10 </div> 11 12 <div class="icon1 adjust-1-line"> 13 <p>テキストテキストテキストテキストテキストテキスト</p> 14 </div>
CSS
1.icon1, .icon2, .icon3 { 2 margin: 2em 0; 3} 4.icon1::before, 5.icon2::before, 6.icon3::before { 7 content: url(); 8 display: inline-block; 9 float: left; 10 margin-right: 1.5em; 11 width: 50px; 12} 13.icon3::before { 14 margin-top: 2.5em; 15 margin-bottom: 2em; 16} 17 18/*1行の時の上下中央配置*/ 19.adjust-1-line { 20 height: 58px; 21 line-height: 58px; 22} 23/*3行の時の上下中央配置*/ 24.adjust-3-line { 25 width: 700px; 26 height: 80px; 27}
###試したこと
HTML tableタグでのコーディング
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。もし他の方法を探されておられるなら、質問文に仕様を追記されることをお勧めします。
回答2件
あなたの回答
tips
プレビュー