右对齐按钮垂直未对齐
问题描述:
我有一行标题文本和右侧的按钮。右对齐按钮垂直未对齐
<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>
上面的代码是我目前的,但我已经尝试了很多变化。在所有这些中,按钮不与文本垂直对齐。 (下面的图像包括叠加,当我悬停在铬的元素窗格中的元素,以显示垂直对齐方式。)
搜索计算器上存在的问题,我发现这个问题贴多次;然而,我没有找到有用的答案。
有人想过这个吗?
答
发生这种情况的原因是标题的行高和按钮的高度不同。
随着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>
答
您可以尝试使用网格是移动的友好,使里面的一切垂直对齐。
<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>
添加这个CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}