画像とテキストを横に並べてなおかつ画像に対して縦方向の真ん中にテキストを置きたい時はよくあります。
例えばサイトのヘッダーでロゴ画像とサイトタイトルを並べたい時など。。。
ウェブページやブログのデザインで、要素の中央揃えは一般的な方法の一つです。
しかし、ただ画像とテキストを並べて配置しただけではバランス良く並ばないことも多いためCSSで調整する必要があります。
本記事では、CSSを利用したテキストや画像、div要素などの要素を並べて表示する方法の実例と留意すべきポイントについて紹介します。
画像と1行テキストの横並び、テキストは縦中央揃えにするCSS
display:flexを使う方法
See the Pen 画像とテキストの横並び flexbox by mixtaro (@mixtaro) on CodePen.
上記のサンプルではロゴ画像imgとテキストh1をラップしている.logoにdisplay:flexを適用しています。
.logo {
display:flex;
align-items: center;
}横並びも縦方向の中央揃えもflexboxなら簡単にできますね。
display:inline-blockを使う方法
See the Pen 画像とテキスト横並びinline-block by mixtaro (@mixtaro) on CodePen.
こちらではaタグでimgとh1タグをラップしています。
<a href="＃">
<img src="https://tokushiyo.net/wp-content/uploads/logo-bee_1.png" alt="LOGO">
<h1>Bee Beauty</h1>
</a>a {
display: block;
text-decoration: none;
}
img, h1 {
display: inline-block;
vertical-align: middle;
}まずimgとh1をラップしているaタグをdisplay:blockにします。
display:inline-blockでは縦方向の中央揃えvertical-align:middleが利用できます。
そしてimgとh1にdisplay:inline-blockとvertical-align:middleを適用します。
display: inline-block; により、imgとh1の二つの要素はインラインブロック要素として扱われます。
インラインブロック要素は、インライン要素のように並びますが、ブロック要素のように高さと幅を持つことができます。
画像とテキスト複数行の横並び、テキストは縦中央揃えのCSS
テキストが複数行だった場合の縦方向中央揃え。
htmlをちょっと修正しました。html5ではaタグの中にdivを含めることは可能になったのでロゴ画像imgとサイト名を囲んだdiv.site-titleを丸ごとaタグで囲むことにしました。
Flexboxで画像とテキスト複数行の横並び
<a href="＃">
<img src="/img/logo-bee_1.png" alt="LOGO">
<div class="site-title">
<h1>Bee Beauty</h1>
<p>NAIL SALON</p>
</div>
</a>先程とほぼ同じですがh1とpをdivで囲むことで、aに設定したdisplay:flexで子要素のimgとdiv.site-titleが横並びが適用されます。
See the Pen 画像＋テキスト複数行 横並びdisplay:flex by mixtaro (@mixtaro) on CodePen.
display:inline-bolockを使う方法
See the Pen 画像＋テキスト複数行 横並び display:inline-bolock by mixtaro (@mixtaro) on CodePen.
vertical-alignを有効にするために.site-titleをdisplay:inline-blockでインラインにし、vertical-align:middleを指定します。
テキストの余白を調整するためpタグをline-height:1にして行の高さをフォントサイズと同じにします。
display:tableを使う方法
See the Pen 画像＋テキスト複数行 横並び display:table by mixtaro (@mixtaro) on CodePen.
a要素をテーブルとして表示し、a>img要素にvertical-align: middleを適用して画像を垂直方向に中央揃えしています。
そして、div.site-titleをテーブルセルにし、vertical-align: middleを使用して要素の垂直方向の中央揃えにします。
img要素はインラインレベル要素なので初期状態でvertical-alignが有効です。
以上、画像とテキストを横並びにして縦方向中央に揃える方法でした。
画像とテキストの横並びにするというのはデザイン上よくあることですがflexboxが登場してより簡単に実現できるようになりました。