質問: 現在、社で改修中のHTMLモダンブラウザ対応業務で 分からないことが発生したため質問させてください。 表題の通り、IE11上で縦書きの文言をのセル内で上下左右中央寄せで 表示しようと思っています。 IE8時代に使用していたHTMLの改修で、IE8とIE11の両方で 同様の見た目になるよう調整する必要があります。 IE8・IE11以外のブラウザは考慮しません。 現在のIE8では、ソースは以下のようになっています。 (8/30 20:43追記) ソース中の文言は可変長で、の高さ一杯に到達したら折り返して表示されます。 ``` 縦書き中央寄せしたい文言(※可変長) ``` ``` td.tategaki_center { text-align:center; font-size:9pt; writing-mode:tb-rl; padding-top:6px; } ``` IE8ではの中で文言が上下左右均等に中央寄せになって表示されますが、 IE11ではのレイアウトが崩れてしまいました(セルが指定した大きさにならず非常に小さくなる)。 そこで、から縦書きにするCSS"writing-mode:tb-rl;"を取り除き、 縦書きにしたい文字列をで囲み、ではなくに縦書きのプロパティを設定し 中央寄せのレイアウトを実現しようと思いましたが上手くいきません。 text-align:center; と vertical-align:middle;を使用したもののvertical-alignは縦書きに影響せず、 文字列が可変長のため、にdisplay:table-cell;を指定するとmargin:auto;で中央寄せできず これ以上の案が考えつかず困っております。 何か良い方法をご存知の方がいらっしゃいましたら知恵をお貸しください。 以下は先述のコードとは異なりますが、縦書き中央寄せができないか考えつつ記述したテストコードです。 IE11で表示すると文言を囲っているが親要素左端に寄ってしまいます。 left,rightの値を設定していないため当然ですが... 尚、上下はtext-align:center;で中央寄せが出来ています。 ``` あいうえお かきくけこ さしすせそたちつてと ``` ``` td { border: solid 1px #000000; } div.div_tategaki_parent { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; } div.div_tategaki_center{ position: absolute; border: solid 1px #FF0000; /* 大きさが見えやすいようテスト中は枠をつける */ writing-mode: tb-rl; /* 縦書き */ top:0; bottom:0; margin: auto; text-align: center; } ```
回答: 申し訳ありません、自己解決できました。 最下部に記載しているCSSを以下の内容に変更することで目的のレイアウトで表示させることができました。 ``` div.div_tategaki_center{ position: absolute; writing-mode: tb-rl; /* 縦書き */ top:0; bottom:0; text-align: center; left:50%; transform:translate(-50%, 0%); } ``` お騒がせしました。