Вертикально центр Bootstrap 3 в столбце

Question

Я потратил некоторое время, пытаясь понять, почему моя кнопка не будет центрировать вертикально внутри столбца. Я решил, что спрошу здесь, потому что я думаю, что мне что-то не хватает, HTML:

<div class="container"> 
    <div class="row"> 
     <div class="sellthem"> 
      <div class="col-sm-8 col-sm-offset-1"> 
       <div class="sellContent"> 
        <h1 class="sellHeader">Bacon ipsum dolor amet fatback turkey filet mignon</h1> 
        <h4 class="sellText">Bacon ipsum dolor amet fatback turkey filet mignon ham T-bone alcatra drumstick tenderloin strip steak meatball. Rump picanha chicken beef sausage tri-tip</h4> 
       </div> 
      </div> 
      <div class="col-sm-2 sendThem"> 
       <button type="button" class="btn btn-lg btn-block">Sign Up</button> 
      </div> 
     </div> 
    </div> 
</div> 

текст в h1 и h4 тегов изменится, так что высота может меняться, и я хотел бы, чтобы отцентрировать кнопку в столбце col-sm-2. Когда я исследовал документацию Bootstrap под номером buttons, ничего не упоминается относительно вертикального центрирования.

Когда я искал SO я бегу через How can I center vertically a bootstrap class button? но он использует принудительную высоту 200px, answer:

div#container { 
    height: 200px; 
    border: solid 2px green; text-align:center; 
    line-height:200px; 
} 
input#verticalButton { 
    vertical-align: middle; 
} 

Дальнейшие исследования, How to center buttons in Twitter Bootstrap 3?center-block предлагает, но это для горизонтального центрирования, и я хочу, вертикальное центрирование.

Далее вниз по кроличьей норе я натыкался button vertical align bootstrap, но когда я пытаюсь:

HTML:

<div class="sendThem"> 
    <div class="col-sm-2"> 
     <button type="button" class="btn btn-lg btn-block">Sign Up</button> 
    </div> 
</div> 

CSS:

.sendThem { 
    display:table; 
} 
.sendThem .col-sm-2 { 
    display:table-cell; 
    vertical-align:middle; 
    float:none;  
} 

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

Что такое правильный способ центрирования кнопки по вертикали с HTML и CSS, так что я могу получить что-то вроде этого:

Я не планировал использовать набор высоты, и все, что ниже col-sm была бы в центре с полной шириной. Вот Bootply, пытающийся центрировать кнопку по вертикали.

Answer 1

Ну Вы можете использовать этот код:

.sellthem { 
    display: flex; 
    align-items: center; 
} 

@media only screen and (max-width : 768px) { 
    .sellthem { 
     display: block; 
    } 
} 

принять во внимание, что это больше похоже на хак (вы перезаписать его код базы), так что это не самый лучший способ решить эту проблему, так как Bootstrap не поддерживает вертикальное выравнивание в своей сетке (не уверен, но я думаю, что в новой версии они будут иметь вертикальное выравнивание).

Примечание:, пожалуйста, проверьте это решение во всех браузерах, которые вы поддерживаете.

Два возможных решения могут быть использованы другой сеткой, основанной на flexbox, или просто написать стили для этого сценария для вашего собственного.

UPDATE

Вы можете написать просто следующий, и он должен работать так же:

@media only screen and (min-width : 768px) { 
    .sellthem { 
     display: flex; 
     align-items: center; 
    } 
}