Q&A
画像とテキストでクラスを分けてinlineで横並びにしてみてはいかがでしょうか？
h1 タグの中に ｓｖｇ とテキストを書きました。
以下の図で
- svg は上にくっついています。
- テキストは下の方にあります。
それぞれの上下の位置を中央にするにはどうしたらよいですか?
ソースは以下。
html
1 1 <html lang="ja"> 2 2 <head> 3 3 <meta charset="UTF-8"> 4 4 <style> 5 5 h1 { background-color: pink; } 6 6 img { background-color: gray; } 7 7 </style> 8 8 </head> 9 9 <body> 10 10 <h1> 11 11 <img src="./svg-icon.svg" width="100px"> 12 12 ハローワールド 13 13 </h1> 14 14 </body> 15 15 </html>
補足: svgはフリー素材から拝借しました。
回答1件
ベストアンサー
すばらしい! ありがとうございます
もしよければ教えてもらいたいです。
vertical-align で画像が middle になったのは理解できるのですが、なぜハローワールドの文字も中央揃いになったのでしょうか?
http://www.htmq.com/style/vertical-align.shtml
> vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
imgにvertical-align: centerを設定したことによって、h1内の文字・画像の全ての縦方向の揃え位置がcenterになったというわけです。
謝謝!
あなたの回答
tips
プレビュー
