右对齐按钮垂直未对齐

Question

我有一行标题文字和右边的按钮。

<div class="page-header">
    <div class="pull-right">
        <button type="button" class="btn btn-success pull-right">Set All Values</button>
    </div>
    <h4>Points Earned for Each Chapter</h4>
</div>

上面的代码是我目前的代码，但我尝试了很多变化。在所有这些中，按钮不与文本垂直对齐。 （当我将鼠标悬停在Chrome的“元素”面板中的元素上时，下图包含叠加层，以显示垂直对齐方式。）

在stackoverflow上搜索现有问题，我发现这个问题多次发布;但是，我没有找到知识渊博的答案。

有人想出来了吗？

Answer 1

这是因为标题的行高和按钮的高度不同。

标题为line-height: 1.9;时，它应该有效：

.page-header h4 {
   line-height: 1.9;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
    <div class="pull-right">
        <button type="button" class="btn btn-success pull-right">Set All Values</button>
    </div>
    <h4>Points Earned for Each Chapter</h4>
</div>

Answer 2

您可以尝试使用网格移动设备友好，并使所有内部垂直对齐。

 Private Sub Worksheet_Change(ByVal Target as Range) 
    Dim objPPT as Object
    objPPT = GetObject("C:\username\KPIs.pptx")
    objPPT.UpdateLinks
           'may need a pause here
    onjPPT = Nothing
 End Sub

添加此CSS

    <div class="page-header vertical-center">
    <div class="row">
        <div class="col-md-8">
            <h1>Text on the left</h1>
        </div>
        <div class="col-md-4">
            <button type="button" class="btn btn-success pull-right">Set All Values</button>
        </div>
    </div>
</div>