相同高度和垂直居中文本的引導按鈕

Question

我有3個引導按鈕並排，但其中一個有換行符（我正在使用white-space: normal修改它們）。我需要它們都具有相同的高度和垂直居中的文字。

我有他們這樣的：

我需要他們這樣的：

我無法弄清楚如何做到這一點。有任何想法嗎？

Answer 1

會是這樣的工作嗎？

.option-button { 
 
    height:100%; 
 
} 
 

 
.media-object { 
 
    height: 100px; 
 
}

<br/><br/> 
 
<div class="media-object pull-left"> 
 
    <button class="btn btn-info option-button">A</button> 
 
    <button class="btn btn-primary option-button">A<br/>B<br/>C</button> 
 
    <button class="btn btn-info option-button">A</button> 
 
</div>    
 

 
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

你可以使用上的按鈕height: 100%;但是，你需要設置包含div的高度。希望這可以幫助！

Answer 2

您可以使用<button>或<input type='button'>元素併爲它們提供最高按鈕的最小高度（min-height）以達到所需結果。