Asial Blog

Recruit! Asialで一緒に働きませんか?

画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応)

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
こんにちは、鴨田です。

何らかの要素が縦横中央揃えになっているデザインが結構な頻度で出てきます。
デザイナーとしては見栄えを考えてそうしているのですが、
コーダーとしては、横方向はまだしも縦方向の中央揃えは何かと面倒だったりします。

いくつかケースがあると思うので、それぞれに関して自分ならこうする、
というコーディングをしていきたいと思います。

とある要素の中で画像だけを縦横中央揃えしたい、というケースもあると思いますが、
今回は画像があってその横に来るテキストを縦方向に中央揃えしなければならない、
というデザインに特化した説明をします。

また、画像の横幅は決まっているけど、テキスト部分の横幅が可変となっていて、
かつ、画像とテキストを内包するリンクは縦横いっぱいにリンクエリアが確保されている
というリキッドレイアウトとします。



0.元となるHTML



HTML
  1. <div class="wrap">
  2.   <a href="#">
  3.     <div><img src="100-100.png" /></div>
  4.     <p>画像アリ一行テキスト</p>
  5.   </a>
  6.   <a href="#">
  7.     <p>画像ナシ一行テキスト</p>
  8.   </a>
  9.   <a href="#">
  10.     <div><img src="100-100.png" /></div>
  11.     <p>画像アリ複数行テキスト<br />画像アリ複数行テキスト<br />画像アリ複数行テキスト</p>
  12.   </a>
  13.   <a href="#">
  14.     <p>画像ナシ複数行テキスト<br />画像ナシ複数行テキスト<br />画像ナシ複数行テキスト</p>
  15.   </a>
  16. </div>

<img>を<div>で囲んでいますが、場合によっては囲う必要はありません。
(1と3のケースでは、囲う必要はありません。
 divに指定しているCSSをimgに適用すれば動くはずです)

これから各ケースにおいて、CSSの説明をしますが、
デザイン上の装飾に関しては、スルーします。
縦方向の中央揃え、リキッドレイアウトに関する箇所のみの説明となります。



1.line-heightを使う



CSS
  1. .wrap {
  2.   border-top: 1px solid #666;
  3. }
  4. .wrap a {
  5.   width: 100%;
  6.   -webkit-box-sizing: border-box;
  7.   -moz-box-sizing: border-box;
  8.   -o-box-sizing: border-box;
  9.   box-sizing: border-box;
  10.   padding: 10px;
  11.   text-decoration: none;
  12.   color: #333;
  13.   background: #eee;
  14.   border-bottom: 1px solid #666;
  15.   display: block;
  16. }
  17. .wrap a:hover {
  18.   background: #eff;
  19. }
  20. .wrap div {
  21.   display: inline-block;
  22.   margin: 0 5px 0 0;
  23.   vertical-align: middle;
  24. }
  25. .wrap p {
  26.   display: inline-block;
  27.   line-height: 100px;
  28. }


デモページ

<img>を含む<div>に対して、"vertival-align"を指定し、
横に並ぶ<p>に"line-height"を画像の高さに合わせて指定することで、
縦方向に中央揃えとすることが出来ます。

テキストが絶対に一行に収まるときは、この方法が一番楽な実装になると思いますが、
テキストが複数行になると派手に崩れます。



2.display: table-cellを使う



CSS
  1. .wrap {
  2.   border-top: 1px solid #666;
  3. }
  4. .wrap a {
  5.   width: 100%;
  6.   height: 120px;
  7.   -webkit-box-sizing: border-box;
  8.   -moz-box-sizing: border-box;
  9.   -o-box-sizing: border-box;
  10.   box-sizing: border-box;
  11.   padding: 10px;
  12.   text-decoration: none;
  13.   color: #333;
  14.   background: #eee;
  15.   border-bottom: 1px solid #666;
  16.   display: table;
  17. }
  18. .wrap a:hover {
  19.   background: #eff;
  20. }
  21. .wrap div {
  22.   display: table-cell;
  23.   width: 100px;
  24.   padding: 0 5px 0 0;
  25. }
  26. .wrap p {
  27.   display: table-cell;
  28.   vertical-align: middle;
  29.   line-height: 1.2;
  30. }


デモページ

まず、<div>と<p>を内包する<a>に、"display: table"を指定し、
<div>と<p>に"display: table"を指定することで、横並びのリキッドレイアウトを実現します。

<div>に"width"をpx指定することで、<p>の幅は可変となります。
最後に、<p>に"vertical-align"を指定することで、縦方向に中央揃えとなります。



3.box-align: centerを使う



CSS
  1. .wrap {
  2.   border-top: 1px solid #666;
  3. }
  4. .wrap a {
  5.   width: 100%;
  6.   height: 120px;
  7.   -webkit-box-sizing: border-box;
  8.   -moz-box-sizing: border-box;
  9.   -o-box-sizing: border-box;
  10.   box-sizing: border-box;
  11.   padding: 10px;
  12.   text-decoration: none;
  13.   color: #333;
  14.   background: #eee;
  15.   border-bottom: 1px solid #666;
  16.   display: -webkit-box;
  17.   display: -moz-box;
  18.   display: -o-box;
  19.   display: box;
  20.   -webkit-box-align: center;
  21.   -moz-box-align: center;
  22.   -o-box-align: center;
  23.   box-align: center;
  24. }
  25. .wrap a:hover {
  26.   background: #eff;
  27. }
  28. .wrap div {
  29.   width: 100px;
  30.   padding: 0 5px 0 0;
  31. }
  32. .wrap p {
  33.   -webkit-box-flex: 1.0;
  34.   -moz-box-flex: 1.0;
  35.   -o-box-flex: 1.0;
  36.   -ms-box-flex: 1.0;
  37.   line-height: 1.2;
  38. }


デモページ

<div>と<p>を内包する<a>に、"display: box"を指定することで、自身をボックス要素とし、
さらに、"box-align: center"を指定することで、子要素の縦方向の揃え位置が中央揃えになります。

<div>に"width"をpx指定し、<p>には"box-flex"を指定することで、
横並びのリキッドレイアウトとなります。



以上です。

IE9での対応を考えると、2の方法がオススメですが、
古いIEまで考えると、実は2も3も使えなかったりします。
その時は真面目にmarginを使用して、行数に応じたクラスを作成するなどして、
どうにかするしかありません。

スマホ対応やモダンブラウザだけでいいのであれば、
是非試してもらえたらと思います。