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] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …