[CSS]もっとも簡単なテキストや画像等の縦横中央配置

2017年9月21日css, WEB制作

ページレイアウトをする時にちょくちょく躓きそうな、要素の縦横中央配置のcss Tipsです。
IE7含むIE7以下では動作しませんが、化石ブラウザ使っている人はほぼ淘汰されてきているので、この方法でも大丈夫でしょう。

サンプルとサンプルコード

div要素の中に要素というシンプルな形の例です。
中央寄せしたい要素を囲っているdivに対し【display:table】を指定し、中の要素に【display:table-cell】を指定します。

段落テキスト縦横中央

Vertical and horizontal center

段落テキスト中央寄せ

応用例

このTipsを使ってこんな感じのレイアウトが組めます。
遊び心でtransitionやtransform等を入れています。

タイトル

概要テキスト-リンク先の概要説明などを書いたりなんだりかんだり
facebookのシェアみたいなレイアウトですね。

HTML部分は以下のようにシンプルな感じ。
画像を左側に配置し、右に概要テキストを表示する、リンクを紹介する時とかに使えそうなレイアウト。

cssのポイントは、display:tableで組んでいる為、中の要素同士のmarginはborder-spacing: 10px 0;で行っています。

border-spacingのショートな書き方は通常のpaddingやmarginと違います。
padding:上下 左右;となりますがborder-spacingは左右 上下の順になります。

この記事が気に入ったら
『いいね』しよう!