ブートストラップ。単一の列の垂直方向の整列

Question

私はブートストラップパネル内の一番右の列を垂直に整列しようとしています。私はこの質問が頼まれて、stackoverflowに応答した知っているが、私が見つけたソリューションのすべては、通常行の中のすべての列を中心にする必要がありますので、動作しません。

Bootply link

マイコード：

.hotel-panel { 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
} 
 
.panel-image { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.rate { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    float: none; 
 
}

<div class="panel panel-default"> 
 
    <div class="panel-body hotel-panel"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 pull-left panel-image"> 
 
     <img src="http://s3.amazonaws.com/governmentswagger/IMG_2843.JPG" alt="asdf" width="250"> 
 
     </div> 
 
     <div class="col-sm-5"> 
 
     <h4>Hilton Atlanta Buckhead</h4> 
 
     <p>Free parking</p> 
 
     <p>Free wifi</p> 
 
     </div> 
 
     <div class="col-sm-3 rate text-center"> 
 
     <h4>$289</h4> 
 
     <button type="button" class="btn btn-primary">Govt Rate Link</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Answer 1

あなたはpanel with tableを使用することができます。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.hotel-table td { 
 
    padding: 16px !important; 
 
} 
 
.hotel-table h4 { 
 
    margin-top: 0; 
 
} 
 
td.hotel-image { 
 
    padding: 0 !important; 
 
    width: 250px; 
 
} 
 
td.hotel-about { 
 
    width: 100%; 
 
} 
 
td.hotel-rate { 
 
    text-align: center; 
 
    vertical-align: middle !important; 
 
}

<div class="container"> 
 
    <div class="panel panel-default"> 
 
    <table class="table hotel-table"> 
 
     <tbody> 
 
     <tr> 
 
      <td class="hotel-image"> 
 
      <img src="http://s3.amazonaws.com/governmentswagger/IMG_2843.JPG" alt="asdf" width="250"> 
 
      </td> 
 
      <td class="hotel-about"> 
 
      <h4>Hilton Atlanta Buckhead</h4> 
 
      <p>Free parking</p> 
 
      <p>Free wifi</p> 
 
      </td> 
 
      <td class="hotel-rate"> 
 
      <h4>$289</h4> 
 
      <button type="button" class="btn btn-primary">Govt Rate Link</button> 
 
      </td> 
 
\t  </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

http://www.bootply.com/v8JrzAcONR

Answer 2

あなたはフレキシボックスを使用することができますが、これは、行全体に影響を与えます。私は...最も簡単な方法は、変換に使用することだと思います

.vcenter { 
     top:50%; 
     transform: translateY(50%); 
     -webkit-transform: translateY(50%); 
     -ms-transform: translateY(50%); 
    } 

http://www.bootply.com/4dADRREDVH