相同高度和垂直居中文本的引导按钮

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）以达到所需结果。