【CSS】display:table-cell内の画像・縦書きの不具合

68 view

最近の制作作業中に、上下左右中央に配置させたいという状況が何度かありました。

CSSでは「上下中央」は実装が難しく、様々な指定をする必要があるのですが、実はテーブル組みの中ではvertical-align: middleの指定のみで配置する事ができます。
そこで、部分的にdisplay: tabledisplay: table-cellを使用し、配置を実現しました。

しかし、特定の条件下では正しく表示されない場合があったので、その時の状況と、行った対策について紹介します。

display: table-cell内の画像がはみ出る

統一されたサイズの正方形内で、様々なサイズの画像を上下中央で配置するというデザインをいただきました。

このような形です。
中央配置するにあたって、display: table-cellを以下のように指定しました。

.item {
  display: table;
  width: 214px;
  height: 214px;
  text-align: center;
}
.item .inner {
  display: table-cell;
  vertical-align: middle;
}

これであっさり完了…と思いきや、

縦長の画像の場合のみ、なぜか縦にはみ出てしまいました。

画像を囲っている要素を色々と変更してみましたが、どうにも上手くいかないので、仕方なくimgタグにmax-heightを追加しました。

.item .inner img {
  max-height: 214px;
}

これで今度こそ完了…といきたかったのですが、今度はIEで見た時に横がはみ出ていました。
(どうやらIEでは縦も横もはみ出ていたようです。)

こちらの修正方法としては、先ほどと同様にimgタグにmax-widthを指定するか、display: tableの要素に対してtable-layout: fixedを指定すると直ります。
(申し訳ないのですが、table-layoutを変える事で直る理由についてはよく分かっていません。)

今回は、display: tableの中に2つ以上のtable-cellが入る事は無いので、後者を選択しました。
これで、当初の想定通りの表示にすることができました。

writing-modeで縦書きをした際に、中央に寄せたい・文字が横向きになる

縦書きで上下左右中央に配置するということで、上記の例と同じくdisplay: table-cellを使用して中央指定をしました。

.vertical {
  display: table;
  width: 100%;
}
.vertical .inner {
  display: table-cell;
  vertical-align: middle;
  writing-mode: vertical-rl
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl
}

しかし、この状態では問題点が2つあります。

左右中央に寄らない

文字が左に寄ってしまいます。
また、この状態でtext-align: centerを指定しても、文章が上下中央寄せになるだけで左右中央にはなりません。

Chromeで、文字が横を向く

Chromeではなんと文字が横を向いてしまいます。

これらは、display: table-cellとwriting-modeを同時に指定した際に発生するようです。
そこで、table-cellの中に囲いをもう一つ作り、display: table-cellとwriting-modeを同時に指定しないように変更しました。

.vertical .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.vertical .inner .ib {
  display: inline-block;
  text-align: left;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
}

これで、正しく縦書きを上下中央配置にできました。

終わりに

display: tableを利用する事でposition: absoluteを使うことなく配置ができますが、今回のような不具合が発生する事もあるようなので、上手く対応していきたいですね。

また、他の配置プロパティとしてdisplay: flexもあります。
こちらは、より柔軟に配置を指定できる一方、旧ブラウザで対応していないといった問題点もあります。

それぞれの利点・欠点を把握し、その場に合ったCSS指定をしましょう。

\ SNSでシェア /

WRITER

nakaya

制作部 nakaya

1990年生まれ。新潟出身。
16年8月入社。
趣味:スキー、卓球、バドミントン
犬が好き。

TAGS