Bootstrap. Вертикальное выравнивание одного столбца

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

Вы можете использовать Flexbox, но это будет влиять на всю строку. Я думаю, что самый простой способ заключается в использовании преобразования ..

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

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