33766


「仮想テーブルレイアウト」で上下センター揃えができないのですが、  
以下のCSSでどこががおかしいのでしょうか？

**希望のイメージ** （上下左右#innerの中央揃え）  
[![画像の説明をここに入力](https://i.stack.imgur.com/boyC2.png)](https://i.stack.imgur.com/boyC2.png)

子要素の`li`に

[code]

    display: table-cell;
    
[/code]

を設定し、  
親要素の`ul`に

[code]

    display: table;
    
[/code]

を設定しています。

**[index.html]**

[code]

    <!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>
    
[/code]

**[style.css]**

[code]

    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;
    }
    
[/code]

ブラウザで表示すると、下の画像のようになります。  
[![結果](https://i.stack.imgur.com/SGQud.png)](https://i.stack.imgur.com/SGQud.png)

[code]

    ul{
      height: inherit;
      display: table;
      text-align: center;
    }
    
[/code]

とすると以下のようになりました。

[![画像の説明をここに入力](https://i.stack.imgur.com/cEyVA.png)](https://i.stack.imgur.com/cEyVA.png)


CC BY-SA 3.0
2017-04-04T08:39:10.940
33765
2017-04-04T10:13:05.333
2017-04-04T10:13:05.333
12297
12297
question
css html5
仮想テーブルレイアウトで上下センター揃えができない。


テーブルセルに対する `vertical-align` は、セルの `margin` ではなく `padding`
を制御するものであり、`vertical-align: middle` は **セルの中で**
上下中央にするという意味です。セル自体の高さは常に行の高さに等しく、テーブルが一行で構成されていればテーブルの高さに等しくなります。

ですから、メニュー項目の高さを変えることなく上下中央にしたいのであれば、メニュー項目をセルにしてはいけません。例えばセルの中に背景やボーダーを設定した要素を置きます。

そうでなくともメニュー項目は文字の部分以外（例えば左右の余白）をクリックしても反応すべきで、そのためにリンクであるAタグでボタン全体を形作ることが多いです。

[code]

    body {
      background: #ccc;
      width: 940px;
      margin: 10px auto;
    }
    
    #inner {
      background: #aaa;
      height: 100px;
    }
    
    ul {
      display: table;
      text-align: center;
      height: inherit; /* ないし 100% */
    }
    
    li {
      display: table-cell;
      vertical-align: middle;
    }
    
    a {
      display: block;
      background: #896;
      width: 150px;
      border: #f94 1px solid;
    }
[/code]

[code]

    <div id="inner">
    
      <ul>
        <li><a href="">あああああ</a></li>
        <li><a href="">いいいいい</a></li>
        <li><a href="">ううううう</a></li>
      </ul>
    
    </div>
[/code]

もしくは、テーブル全体を別の方法で上下中央にすることになるでしょう。


CC BY-SA 3.0
2017-04-04T10:07:32.620
33766
2017-04-04T10:07:32.620
8000
33765
answer