如何使文本垂直居中引导

Question

我有这个输出：

这是我的代码：

<div class="modal-footer">
    <button type="button" class="btn btn-success pull-right">Send</button>
    <div id="total" class="pull-right vcenter">Total Amount: 0.00</div>
</div>

这是CSS：

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

我想这样做：

更好的方法是什么？

Answer 1

花车不是这里的答案。如果您希望vertical-align正常工作，则两个元素都必须为display: inline-block;。

Answer 2

将line-height设置为按钮高度。假设按钮的高度是30px，所以css应该是

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    line-height: 30px;
}

  

line-height将设置文本的高度，因此文本和按钮的相等高度将为我们提供垂直居中的外观

Answer 3

你可以用这个

.vcenter {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
}

通过使用浮动而不解决您的问题。所以就这样离开。

Answer 4

这将解决问题。

.align {
    line-height: 34px;
    margin: 0;
    display: inline-block;
}

HTML：

<button type="button" class="btn btn-success pull-right">Send</button>
<p id="total" class="vcenter">Total Amount: 0.00</p>