vertical-align：ブートストラップカラムで使用すると、中間がコンテンツを真ん中に配置しません。

Question

3つのカラムがあり、中央のカラムには真ん中に縦に並んでいるボタンがあります。

<div class="row"> 
    <div class="col-md-1"> 
     <div class="mypanel"> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="mypanel"> 
      <div style="vertical-align:middle"> 
       <button type="button">Click</button> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="mypanel"> 

     </div> 
    </div> 
</div> 

スタイル

.mypanel { 
     height: 200px; 
     border: 1px solid black; 
    } 

しかしvertical-align:middleは、任意のdiv

DEMO

Answer 1

.mypanel { 
    height: 200px; 
    border: 1px solid black; 
    display:table; 
} 

.mypanel div{ 
    display:table-cell; 
    vertical-align:middle 
} 

これは https://jsfiddle.net/xyx3enz1/

Answer 2

.mypanel { 
 
     height: 100px; 
 
     width: 100%; 
 
     display: table; 
 
     border: 1px solid black; 
 
    } 
 
    .text-centered { 
 
       text-align: center; 
 
       display: table-cell; 
 
       vertical-align: middle; 
 
    }

<div class="row"> 
 
    <div class="col-md-1"> 
 
     <div class="mypanel"> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-1"> 
 
     <div class="mypanel"> 
 
      <div class="text-centered"> 
 
       <button type="button">Click</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-1"> 
 
     <div class="mypanel"> 
 

 
     </div> 
 
    </div> 
 
</div>

の内容には影響がありません

Answer 3

私のお気に入りのアプローチは、要素を作成するために後ろに要素を作成し、その高さを設定し、それに基づいて垂直方向に配置することです。多くのCSSを必要としません：

// I changed the col-md-1 to col-md-4 for this example 
.col-md-4 { 
    text-align: center; 
    height: 200px; 
} 

.col-md-4 .mypanel { 
    height: 100%; // Make sure .mypanel is set to 100% height otherwise our pseudo element won't know what 100% height is 
} 

// Here is the pseudo element, set the vertical align here and on your button 
.col-md-4:nth-child(2) .mypanel:after { 
    content: ''; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 

.col-md-4:nth-child(2) .mypanel button { 
    vertical-align: middle; 
    display: inline-block; 
} 

この作業を確認してください。jsFiddle