WEB Tips デザイン・コーディング

画像・テキストの横並び+縦中央揃えほかCSSの中央揃えまとめ

2019-08-06

本記事にはプロモーションが含まれています。

画像・テキストの横並び+縦中央揃えほかCSSの中央揃えまとめ

ウェブページやブログのデザインで、要素の中央揃えは一般的な方法の一つです。

本記事では、CSSを利用したテキストや画像、div要素などさまざまな要素中央揃えの実装方法や、留意すべきポイントについて紹介します。

画像とテキストを横並びして、縦(垂直方向)中央揃えに

画像とテキストを横に並べてなおかつ画像の縦方向の真ん中にテキストを置きたい時はよくあります。サイトのヘッダーなどでロゴ画像とサイトタイトルを並べたい時など。。。

しかし、ただ画像とテキストを横並びしただけではバランス良く並ばないためCSSで調整する必要があります。ここからは具体的な実装方法や留意すべきポイントについて詳しく説明します。

さらに縦中央揃えにおける注意点や、レスポンシブに対応する方法についても解説します。

画像とテキストが1行の時の横並び、縦中央揃え

画像とテキストの横並びの例

display:flexを使う方法

See the Pen 画像とテキストの横並び flexbox by mixtaro (@mixtaro) on CodePen.

上記のサンプルではロゴ画像imgとテキストh1aで囲んでdisplay:flexを適用しています。

a {
  display:flex;
  align-items: center;
}

横並びも縦方向の中央揃えもflexboxなら簡単にできますね。

display:inline-blockを使う方法

See the Pen 画像+テキスト複数行 横並び by mixtaro (@mixtaro) on CodePen.

display:inline-blockでは縦方向の中央揃えvertical-align:middleが利用できます。

まずimgh1をラップしているaタグにdisplay:blockにします。そしてimgh1display:inline-blockvertical-align:middleを適用します。

画像とテキスト複数行の場合

テキストが複数行だった場合の縦方向中央揃え。

htmlをちょっと修正しました。html5ではaタグの中にdivを含めることは可能になったのでロゴ画像imgとサイト名を囲んだdiv.site-titleを丸ごとaタグで囲むことにしました。

Flexboxで画像とテキスト複数行の横並び

<a href="index.html">
    <img src="logo.png" alt="LOGO">
  <div class="site-title">
				<h1>とくしよネット</h1>
				<p>レンタルサーバーレビューとWeb制作Tips</p>
			</div>
  </a>

先程とほぼ同じですがh1pdivで囲むことで、aに設定したdisplay:flexで子要素のimgdiv.site-titleが横並びが適用されます。

See the Pen 画像+テキスト複数行 横並び by mixtaro (@mixtaro) on CodePen.

display:inline-bolockを使う方法

See the Pen 画像+テキスト複数行 横並び display:inline-bolock by mixtaro (@mixtaro) on CodePen.

vertical-alignを有効にするために.site-titledisplay: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が有効です。

ブロックレベル要素でvertical-alignが有効になる条件は
・要素のdisplayプロパティが、inline, inline-block, table-cell, table-captionの時
・要素の親要素がテーブルセルである時
になります。

以上、画像とテキストを横並びにして縦方向中央に揃えるでした。

画像とテキストの横並びにするというのはデザイン上よくあることですがflexboxが登場してより簡単に実現できるようになりました。

要素が可変する時にCSSで上下左右中央揃え(センタリング)のまとめ

センタリングしたい要素のサイズが可変の場合に有効な上下左右中央揃えの実装方法をまとめます。

Flexboxを使う方法

前述の通りdisplay:flexなら上下左右の中央揃えも簡単にできます。

.wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  height:150px;
}

テキストが短い場合はこれだけでも中央揃えできますが、テキストが複数行になる(横幅が可変する)場合も見ていきます。

flex-growを指定する

.content2{
  flex: 0 1 60%;
}

センタリングする要素の最大幅を指定したい場合、flex-basisに最大幅を指定します。さらにflex-grow:0 / flex-shrink:1 に指定するとmax-widthを指定した時と同じようになります。

flexショートハンド
flex : flex-grow(初期値:0) | flex-shrink(初期値:1) | flex-basis(初期値:auto)

marginを指定する

.content3{
  margin:auto;
  max-width:60%;
}

marginをauto、max-widthを指定しても上下左右中央揃えになります。

See the Pen 上下左右中央揃え flexbox by mixtaro (@mixtaro) on CodePen.

wrapperの高さよりもcontentの高さが大きくなった場合ははみ出してしまう

スマホなど画面サイズが小さい時、wrapperの高さよりcontentの高さを超える場合はcontent要素がはみ出てしまいます。

子要素がはみ出す

メディアクエリーでスマホの時はwrapperの高さをautoにすればはみ出さなくなります。

@media screen and (max-width:600px){
  .wrapper{
    height:auto;
  }
}

positionとtransformを使う方法

position:absoluteとtransformを使って上下左右中央に配置する方法です。

この方法ではテキストが複数行になってもセンタリングする要素の幅を指定しなくても中央揃えになります。この場合の最大幅は50%になります。

widthを50%以上にしたい時はcontentにwidthを指定する必要があります。

またwrapperにpositionを指定しているので高さの指定が必要です。

See the Pen 上下左右中央揃え position/transform by mixtaro (@mixtaro) on CodePen.

この方法も、wrapperよりcontentの高さが大きくなったらはみ出してしまいます。状況に合わせてwidthやheightの調整が必要です。

table-cellを使う方法

親要素wrapperにdisplay:table、中央寄せしたい子要素contentdisplay:table-cellを指定します。

display:table-cellの時はvertical-alignが使えます。

.content{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

この手法では、センタリングする子要素contentのボリュームが多くなってもはみ出さずに量に応じて、wrapperは伸縮します。

子要素ははみ出さない

See the Pen 上下左右中央揃え table-cell by mixtaro (@mixtaro) on CodePen.

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-