フレックスボックスでdivをセルの内側に垂直に配置しない

Question

なぜ赤いdivが垂直にセンタリングされないのですか？

マイペン：あなたはflexにtable-cellからテーブルセルのdisplay値を変更するとhttp://codepen.io/helloworld/pen/aWWgBK?editors=1000

<table style="border:1px solid black" class="table"> 
 
    <thead> 
 

 
    <th>selected</th> 
 
    <th>Name</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 

 
     <td class="align-middle"><input type="checkbox"></td> 
 
     <td style="display: flex; align-items: center;"> 
 
     <div style="background:red;"> this text should be vertically aligned in the center of the table cell </div> 
 

 
     </td> 
 
     <td class="align-middle"> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary">Speichern</button> 
 
      <button type="button" class="btn btn-secondary">Abbrechen</button> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <ul> 
 
      <li>item 1</li> 
 
      <li>item 2</li> 
 
      <li>item 3</li> 
 
      <li>item 4</li> 
 
      <li>item 5</li> 
 
      <li>item 6</li> 
 
     </ul> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

は、それが台無しテーブルアルゴリズムをするように見えます。

しかし、テーブルセルのコンテンツを垂直に配置するには、vertical-align: middleが必要です。 （this stubborn propertyは、実際にテーブルセルとインライン要素の–を働くときには、それらのまれな例の一つだ。）

http://codepen.io/anon/pen/wddVPy?editors=1000