CODING

[CSS] 中央揃え

投稿日:


どうも、べ〜やんです。

今回はCSSでテキストやブロックを中央配置する方法を紹介します。





ブロックとインライン


ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライン要素について少し確認します。

ブロック要素

ブロック要素とは、見出し(h1~h6)、p、div、tableなどがあり改行が入り縦に積まれていくように配置される要素です。後述しますが、vertical-alignが使えません。

インライン要素

インライン要素とは、a、span、imgなどがあり改行が入らず横に並ぶように配置される要素です。vertical-alignが使えます。


左右中央揃え


text-align: center;

インライン要素のテキストを中央揃えするには、親要素のブロック要素にtext-align: center;与えることでできます。

See the Pen vYYWNRb by beeyan (@orientado) on CodePen.


margin: 0 auto;

左右のmarginautoにして中央配置します。

横幅がないと使用できないので、widthを指定します。

ここでは高さを与えてしまっているので上揃えになっています。

See the Pen xxxPZby by beeyan (@orientado) on CodePen.


display: inline-block;

ブロック要素をインラインブロック要素に変換して、親要素にテキストセンターを与えて中央配置します。

横幅を指定してないので、内容によって可変します。

See the Pen mddqVrJ by beeyan (@orientado) on CodePen.


上下揃え


line-height

line-heightで行の高さを指定すると上下の中央付近にテキストが配置されます。

See the Pen Baamjgw by beeyan (@orientado) on CodePen.


vertical-align

vertical-align: ;を使えるのはインライン要素やテーブルセル要素なので、親要素にdisplay: table;を子要素にはdisplay: table-cell;を与えてvertical-align: middle;を使用しています。

See the Pen ExxbPbr by beeyan (@orientado) on CodePen.


上下左右揃え


line-heighttext-align: center;など、左右揃えと上下揃えを組み合わせることで上下左右の中央揃えもできます。

その他の方法も紹介します。


position+margin

position: absolute;margin: auto;を使用します。

高さを指定する必要と、position: absolute;の位置は全てauto以外に指定する必要があります。

See the Pen qBBVZOO by beeyan (@orientado) on CodePen.


position+負のmargin

position: absolute;でtop,leftを50%ずつ指定、高さと横幅の半分をマイナスのマージンで戻します。

子要素の左上が基準の位置なので、単純にposition: absolute;でtop,leftを50%に指定すると左上が中心にくるのでそこから高さと横幅の半分の距離だけ修正しています。

See the Pen XWWzdNr by beeyan (@orientado) on CodePen.


calc() 

理屈は上記のposition+負のmarginと同じです。

calc() 関数で「50%から25px引いた位置」のように指定しています。

See the Pen ZEEaOGW by beeyan (@orientado) on CodePen.


transform

position: absolute;で50%ずつ指定、高さと横幅の50%をtransformで戻します。

子要素(高さ50px、横幅100px)の50%分マイナスしています。

See the Pen gOOXrJd by beeyan (@orientado) on CodePen.


display: flex;

シンプルで要素の幅が自動計算にできるので便利です。

See the Pen QWWOEEW by beeyan (@orientado) on CodePen.


おわりに


今回はCSSでテキストやブロックを中央配置する方法を紹介しました。

上下左右の中央揃えは最初は難しく感じるかもしれませんが、理屈はシンプルなので安心してください。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

[超初心者] CSSとは

どうも、べ〜やんです。 HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。 CSSとは何か? CSSとは、Cascading Style Sheets(カスケーディング・スタ …