HTML/CSS

【HTML/CSS】 縦方向・横方向で中央揃えしてみよう!

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


私は現役でフリーランスエンジニアとしてWebサービスやサイト制作をしながら、現在ご覧いただいているブログの運営をしております。

はじめに

今回は、HTML/CSSで要素を縦と横方向で中央揃えする方法について、いくつか存在するパターンを紹介していこうと思います。

上手く中央寄せできない場合などに、ぜひ参考にしてみてください!

横向きのセンタリング(左右中央寄せ)

では、まず横向きのセンタリングについてみていきましょう。

センタリングといっても、文章や画像など中央寄せする対象は様々だと思いますので、それぞれについてみていきます。

文章を中央揃えにする

文章を左右中央に揃えたいときは、その文章が含まれる要素、もしくはその親要素に対してtext-align:centerを指定してあげます。

では例文を見ていきましょう。
例えば、pタグに記述された文章を中央揃えにするときは

/* pタグの文章を左右中央揃えにする */
p {
  text-align: center
}

これだけです。簡単ですよね。

もしWebページ全体の文章を左右中央揃えにするなら、

/* Webページ全体の文章を左右中央揃えにする */
body {
  text-align: center
}

このようにbodyタグで指定してやるとWebページ全体の文章を左右中央揃えにすることができます。

画像を中央寄せ(左右)

次に文章ではなく、画像を中央揃えにしてみましょう!

画像も文章と同じように扱うことができます。
ただし注意が必要なのは、imgタグ自身ではなく親要素に対して、text-align:centerを指定します。

例えば、下のようなHTMLがあったとします。

<!-- pタグ内に画像を配置 -->
<p>
  <img src="..." />
</p>

このHTMLはpタグの中に画像が配置されています。
この画像を左右で中央揃えにしてみるには、画像自身ではなく、画像の親要素に指定します。

/* HTMLで配置した画像の親要素であるpタグを指定する */
p {
  text-align:center;
}

 

縦向きのセンタリング(上下中央寄せ)

では次に縦方向に真ん中に寄せる方法を紹介していきます。

結構皆さん一度は考えるのが

横と同じようにmargin-top:auto; margin-bottom: autoを使えば良さそう」

ということ。ですが実際はこの方法では縦の中央寄せはできないんです。

では、いったいどのようにするのか、順番に見ていきましょう!

親要素の中央に文字に配置する(1行の場合)

もし、文章が1行におさまる場合は、

行の高さ=ボックスの高さ

と指定することで、簡単にボックスの縦中央に文字を配置することができます。
早速サンプルコードを見てみましょう。

<!-- 要素の中に文章を記述 -->
<div class="parent">
  <p>これは例文です。</p>
</div>

このHTMLの文章「これは例文です。」を上下中央揃えにしてみます。

/* 親要素の高さ */
.parent {
  height: 150px;
}
/* 子要素であるpタグの高さ */
.parent p {
  line-height: 150px;
}

簡単に説明すると、親要素であるparentの高さを150pxに指定しているので、それと同じ高さ子要素の上下センタリングしたい文章を指定してやるだけです。

 

 

2行以上の文章を親要素の中央に配置する

先ほどのやり方だと、文章が1行の時専用になってしまうので、2行以上の文章をセンタリングしたい時は少しだけややこしくなってしまいますが、次の方法を使ってください。

今回は、ほとんどのものを中央配置できる便利な方法を紹介します。

たとえ、文が2行以上であっても、ブロックの要素であっても、インラインの要素であっても、擬似要素であっても、この方法を使うことができます!

4つのポイントがあるのでそこだけ押さえてください!

  1. 親要素にposition:relativeを指定しておく
  2. センタリングしたい要素を絶対配置(position:absolute)に
  3. top: 50%で親要素から上から50%の位置に
  4. transform: translateY(-50%)でズレを補正

この4つを指定するだけで、上下を中央に揃えることができます。
サンプルコードを見てみましょう!

/* 複数行の文章 */
<div class="parent">
  <p>1行目の文章です。<br>2行目の文章です。</p>
</div>

このような文章が2行にわたって記述されているものに、先ほどのCSSを指定してみましょう。

/* 親要素にposition:relativeを指定 */
.parent {
  position: relative;
}
/* 子要素にCSSを指定 */
.parent p {
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}

こんな感じですね。
これを指定するだけで、大体の場合の上下中央揃えはできてしまうので、覚えておきましょう!

 

まとめ

うまく中央揃えにできましたでしょうか。
もし、うまくいかないときはブラウザーの検証機能を使って「何が問題になっているか」をチェックするのも効率がよく便利ですよ。

今回の要点は、

  1. 文章は「text-align:center」で中央寄せ
  2. 画像親要素に「text-align:center」を指定して横センタリング
  3. 改行のない文を縦にセンタリングするときは、line-heightを親要素のheightに合わせる
  4. 絶対配置(position: absolute)とtop: 50% とtransform: translateY(-50%)で要素を親要素の縦中央に配置できる※親要素をrelativeにすることを忘れないように!

この点だけ押さえて間違えないようにしてくださいね!

https://itthestudy.com/html-css-max-width%E3%81%A8min-width-%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%BE%E3%81%A8%E3%82%81/


 

最近の投稿

「ワーケーション」とは?環境省が推している理由やメリットを解説

「ワーケーション」とは?2020年7月に、菅官房長官が「ワーケーション」の普及について表明してSNSやニュースで「ワーケーション」が話題になりました。環境省が推進している理由や導入メリット・デメリットを解説します。

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

IT特化型転職エージェントの「レバテックキャリア 」は未経験でも転職することができるのか?について実際に利用した方のクチコミを元に調査しました。

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

【2020年10月更新】IT系の転職エージェントで有名な「レバテックキャリア」ですが、なぜ悪い評判や悪い口コミが多いのか?その理由について説明します。また、是非登録すべき他の転職エージェントもご紹介していますので、参考にしてみてください。

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.