1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. 簡単なコンテンツの天地中央揃え

Posted on Jun 29, 2016 by Naitou

簡単なコンテンツの天地中央揃え

記事カテゴリー: HTML

flexboxで簡単にコンテンツの天地中央揃えを実現します。

コーディング作業をしているとよく出てくるデザイン「天地中央揃え」。
table-cell等で無理矢理天地中央に揃えていましたが、flexboxなら親要素にcssを追加するだけで天地中央揃えが実現出来ます。

flexbox_3

親要素に追加するcssのプロパティは3種類です。(古いsafariに対応させる為にそれぞれsafari用ハックも記述する必要があります。)

display
要素の表示形式を指定します。
flexboxを使うのでflexを値とします。
justify-content
flexアイテムの横方向の整列を指定します。
中央添えなのでcenterを値とします。
align-items
flexアイテムの縦方向の整列を指定します。
中央添えなのでcenterを値とします。

上記プロパティにsafariのハックを追加して、親要素に必要なcssは以下の6行になります。

display: -webkit-flex;
display:flex;
webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS