html - 无法让按钮在垂直线的中间对齐？

Question

我有一个包含两部分的标题，标题和右边的按钮。我希望右边的按钮在行的中间对齐，但即使使用垂直对齐我似乎也无法获得它。有什么建议吗？

    <div class="page-header text-center" style="margin-top: 80px">
            <h1 class="glyph" style="margin-right: 100px"><span class="glyphicon glyphicon-th-large"></span> Events </h1> 
         <button class="btn btn-default btn-xs glyph" id="addEvent" style="margin-left:100px vertical-align:middle"><span class=" glyphicon glyphicon-plus-sign"></span></button> 

        </div>

字形类具有内联显示，因此标题和按钮都在同一行。

Answer 1

在父级上使用 display:table，在子级上使用 display:table-cell，如下所示:

.page-header {
    display: table;
    width: 100%;
    height: 100%;
    text-align:center;
}
.page-header button {
    display: table-cell;
    vertical-align: middle;
}

jsfiddle here