Question

我有一个标题包含两个部分，标题和右边的按钮。我希望右边的按钮在行的中间对齐，但是我甚至无法使用vertical-align来获取它。有什么建议吗？

    <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，在子级上显示：table-cell，如下所示：

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

jsfiddle here

Answer 2

将vertical-align: middle放在每个兄弟姐妹身上，在您的情况下按钮和 H1 如果您的包装 div 有任何height，请向其添加相同的line-height。

div {
    height:200px;
    line-height:200px;
}
div > h1 {
    display:inline;
    vertical-align:middle;
}
div > button {
    display:inline;
    vertical-align:middle;
}

jsfiddle

对于一些更复杂的问题，我非常喜欢3-lines solution：

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 3

将<h1>设置为vertical-align:middle样式。

jsFiddle（那里还有一些额外的样式用于演示）

Answer 4

我想你可以补充一下：

text-align: center

按钮所在的部门。我给你举了一个例子here

编辑我很抱歉，我一开始没有得到您的问题。您应该尝试使用css calc（）函数。我做了一个例子here。通过计算50％的边距减去按钮的高度，您可以将按钮置于中心位置。

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

4 个答案: