質問: cssのdisplay:table-cell;とvertical-align:middle;を使って ボックスの中の要素を上下左右中央に持ってこさせようとしているのですが、table-cellが全く効きません。 以下コードです。 ``` カテゴリ ``` ``` .bbb{ width:1000px; height:50px; background-color:#000000; color:#FFFFFF; display:table-cell; vertical-align:middle; text-align:center; position:absolute; margin:auto; right:0; left:0; } .aaa{ position:relative; } ``` この様な感じでコーディングしているのですが、全くvertical-align:middle;が反映されません。 ちなみに、理由は分かりませんが、どうもこのコーディングですと、display:table-cell;がそもそも 効いてないような気がします。といいますのも、私は、Atomをテキストエディターで使用しているのですが 何故かコーディングをしているとこの、display:table-cell:の“table-cell”の構文だけが暗くなっていました。 Atomでコーディング中の構文が暗くなる場合はそのコードに対してなにか記述ミスがあり、そのコードが反映されてない場合に 起こるみたいなので、原因を探してみたのですが、原因が全く分かりません。 どなたか、ご教示お願い致します。
回答: `.aaa`自体に特別色とか線とかのデザインスタイルがついていないなら、 ``` .aaa { display:table; width: 1000px; margin: auto; } ``` とすれば中身のtable-cellのボックスごと左右にセンターになりますよ。 (別にdisplay:blockのままでも良いのですが、子要素がtable-cellなので直近の親要素をdisplay:tableにしておいた方が仮想テーブルとしては理想的かなと思いまして。) ちなみに`.aaa`は例えば横100%とかで必要なのであれば、 `.aaa`と`.bbb`の間にもうひとつ`.ccc`等の枠を増やし、それを`display:table` として`margin:auto`すれば良いかと。