Bootstrap按钮具有相同的高度和垂直居中的文本

Question

我并排有3个Bootstrap按钮，但其中一个有换行符（我用white-space: normal修改它们）。我需要它们都具有相同的高度和垂直居中的文本。

我喜欢他们：

我需要他们这样：

我无法弄清楚如何做到这一点。有什么想法吗？

Answer 1

这样的东西对你有用吗？

＆＃13;

＆＃13;

.option-button {
    height:100%;
}

.media-object {
    height: 100px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可以在按钮上使用height: 100%;但是，您需要设置包含div的高度。希望这有帮助！