HTML/CSS

【HTML/CSS】 縦・横方向で中央揃え(中央寄せ)してみよう!【コピペOK】

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

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

  • HTML/CSSで横方向・縦方向で中央揃えしたい
  • コピペで簡単に中央揃えしたい

 

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

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

 



 

HTML/CSSで横向きの中央揃え(左右中央寄せ)

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

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

文章を中央揃えにする

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

では例文を見ていきましょう。

 

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

 

/* 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;
}

 

HTML/CSSで縦向きの中央揃え(上下中央寄せ)

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

 

結構皆さん一度は考えるのが「横と同じようにmargin-top:auto; margin-bottom: auto;を使えば良さそう」ということ。

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

 

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

 

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

もし、文章が1行におさまる場合は、「行の高さ=ボックスの高さ」と指定します。

これで簡単にボックスの縦中央に文字を配置することができます。

早速サンプルコードを見てみましょう。

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

 

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

See the Pen center-contents by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

簡単に説明します。

親要素であるparentの高さ(height)を150pxに指定しているので、子要素の行高(line-height)も同じ高さ(150px)に設定しているだけです。

※サンプルコードは分かりやすくするため、行要素の背景に色をつけています。

 

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

先ほどのやり方だと、文章が1行では無い時には正常に機能しません。

もし、2行以上の文章をセンタリングしたい時は次の方法を使ってください。

 

このやり方だと、ほとんどのものを中央配置できる便利な方法です。

すべてこの方法で中央揃えが可能

  • 文が2行以上
  • ブロック要素
  • インライン要素
  • 擬似要素

 

まずCSSだけを見てみましょう。

.parent {
  display: flex;
  align-items: center;
}

.child {
  flex: 1;
}

このように親要素に「display: flex; align-items: center;」を子要素に「flex: 1;」を指定するだけです。

 

HTMLも追加したサンプルコードを見てみましょう!

 

See the Pen multi-line-text-centerd by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

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

 

【HTML/CSS】中央寄せのまとめ

うまく中央揃えにできましたでしょうか。

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

 

  • 文章は「text-align: center;」で中央寄せ
  • 画像は親要素に「text-align: center;」を指定して横センタリング
  • 改行のない文を縦にセンタリングするときは、line-heightを親要素のheightに合わせる
  • 複数行の上下中央寄せはdisplay: flex; が便利

 

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.