仮想テーブルレイアウトで上下センター揃えができない。
「仮想テーブルレイアウト」で上下センター揃えができないのですが、
以下のCSSでどこががおかしいのでしょうか？
希望のイメージ（上下左右#innerの中央揃え）
子要素のliに
display: table-cell;
を設定し、
親要素のulに
display: table;
を設定しています。
[index.html]
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="" content="" charset="utf-8">
</head>
<body>
<div id="inner">
<ul>
<li><a href="">あああああ</a></li>
<li><a href="">いいいいい</a></li>
<li><a href="">ううううう</a></li>
</ul>
</div>
</body>
[style.css]
body {
background: #ccc;
width: 940px;
margin: 10px auto;
}
#inner {
background: #aaa;
height: 100px;
}
ul {
display: table;
text-align: center;
}
li {
display: table-cell;
vertical-align: middle;
background: #896;
width: 150px;
border: #f94 1px solid;
}
ブラウザで表示すると、下の画像のようになります。
ul{
height: inherit;
display: table;
text-align: center;
}
とすると以下のようになりました。
