HTML/CSS

【コピペOK!】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNA
こんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

この記事はこんな方におすすめ

  • ブロックの中のブロック要素を上下左右中央に揃えたい方
  • できるだけ少ないソースコードでブロック要素を上下左右中央に揃えたい方

 

今回はブロック内のブロック要素(つまりdivタグ内のpタグやdivタグなどです)を上下左右中央に揃える方法を伝授します。

レスポンシブWebデザインにも対応しやすい方法をいくつかご紹介していきます!

 

 

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ!

※上記は当サイトからの登録が多い順になっています
※上記以外のエージェントを知りたい方はIT業界エージェント・転職サイトのおすすめをご覧ください。

 

まずは、普通に左右を中央にする方法をおさらい

中身のテキストや画像といった要素の中央寄せは簡単ですね。

左右を中央にする方法をとしては大きく分けて3つあります。

 

  1. 「text-align:center;」を使う方法
  2. 「margin: 0 auto;」を使う方法
  3. 「display: inline-block;」を使う方法

 

順番に見ていきましょう。

【左右中央揃えの方法①】「text-align:center;」を使う方法

こちらは最も基本の左右中央寄せの方法ですね。

親要素となるブロック要素に「text-align:center;」を指定するだけです。

See the Pen right left center by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

【左右中央揃えの方法②】「margin: 0 auto;」を使う方法

次に紹介するのもよく使われる「margin: 0 auto;」で左右中央にする方法です。

この方法だとwidthの指定は必須になりますが、「%」で単位を指定することでレスポンシブWebデザインへの対応が可能となっています。

FUNA
PCで最大幅を決めるために、max-widthを合わせて使うこともあるので覚えておきましょう!

 

See the Pen margin: 0 auto; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

【左右中央揃えの方法③】「display: inline-block;」を使う方法

先ほどと違いwidthを決めずに、内容量に応じた幅でブロックを中央寄せにしたい場合はこちらを使いましょう。

See the Pen display: inline-block; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

上下左右で中央に揃える方法

今回は上下左右で中央に揃える4つの方法をご紹介します。

  1. 「vertical-align: middle;」を使う方法
  2. 「position: absolute;」「margin: auto;」を使う方法
  3. 「transform」を使う方法
  4. 「display: flex;」を使う方法

 

順番に紹介しますが、よりわかりやすくそれぞれの方法を比較できるように下記に注意してください。

ポイント

.wrapperの高さ(height)を「15rem」に設定し、「text-align: center;」で中身のテキストを中央寄せにしています。

 

【上下左右中央揃えの方法①】「vertical-align: middle;」を使う方法

内要素よりも高さのあるブロックで、中身を上下中央寄せにしたいときは「vertical-align」が活躍します。

ただし、「vertical-align」が使えるのはインライン要素・テーブルセルのどちらかなので、上下中央寄せにしたいテキストを内包する要素に「display: table-cell;」を指定しましてください。

See the Pen vertical-align: middle; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

【上下左右中央揃えの方法②】「position: absolute;」「margin: auto;」を使う方法

この方法では、ブロックに「width」「height」指定が必須です。

つまり、もし子要素の高さが指定したheightを超える場合にはみ出てしまいます。

特にレスポンシブWebデザインで使用する場合には「テキストなどの動的に変わるもの」にはあまり適さない方法です。

 

FUNA
下記のソースコードのプレビューもテキストが多くなっているので、表示が崩れているかと思います。

See the Pen 「position: absolute;」「margin: auto;」 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

テキストを小要素に入れたいけどブロックの高さを指定するのはちょっと。。

そのような方はこの後紹介する「transform」「display: flex;」を試してください。

 

【上下左右中央揃えの方法③】「transform」を使う方法

transformを使う方法では、コードは少ないですがやっていることが少しややこしいので、順番に説明します。

  1. 左上を起点として上から50%・左から50%の位置に移動します。(top: 50%; left: 50%;)
  2. 要素の大きさの半分ずつを戻す(transform: translateY(-50%) translateX(-50%);)
  3. これで親要素の上下左右中央に配置することができます。

See the Pen transform by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

【上下左右中央揃えの方法④】「display: flex;」を使う方法

最後に紹介するのは「display: flex;」を使って上下左右中央揃えにする方法です。

記述もシンプルで非常に便利ですね。

See the Pen display: flex; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

FUNA
この方法とてもシンプルで便利なのですが、一つだけ注意があって「IE9以下に未対応」なので、対応させるブラウザに注意して使うようにしてくださいね!

 

関連記事

【コピペOK!】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNAこんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.