无法在垂直线中间找到对齐按钮吗？

我有一个标题和两个部分，一个标题和一个按钮的权利。我希望右边的按钮在线的中间对齐，但我似乎无法获得垂直对齐。有什么建议么？无法在垂直线中间找到对齐按钮吗？

<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>

字形类有一个内联显示，所以标题和按钮都在同一行上。

来源

2014-08-30 user3340037

我真的不明白它.. http://jsfiddle.net/ae9889ox/ – Bokdem 2014-08-30 20:46:44

哎呦，额外的％> – user3340037 2014-08-30 21:15:37

-1

我想你可以添加：

text-align: center

到按钮坐在我司做一个例子here

编辑我很抱歉，我没有得到你的问题在第一。你可能应该尝试css calc（）函数。我举了一个例子here。通过计算50％的边际减去按钮的高度，您可以居中按钮。

来源

2014-08-30 20:47:56 Paco

这并不回答OP的请求，以便将它排列在行的中间......这将按照宽度而不是高度居中对齐它。 – Will 2014-08-30 20:49:05

我编辑了我的答案。现在它也适用于垂直对齐。 – Paco 2014-08-30 21:11:57

这只适用于平方......在你的'margin-top：calc（50％ - 10px）;'实际上是指宽度的50％（奇数，我知道）。看看你自己：http://jsfiddle.net/gckdpodn/2/ – Pevara 2014-08-30 21:23:58

使用显示：表细胞的孩子，像这样：在家长和显示表

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

jsfiddle here

来源

2014-08-30 20:59:37 bonesbrigade

您的小提琴不会将按钮放在与标题相同的线上，这是OP似乎要求的。 – Will 2014-08-30 21:05:50

设置<h1>也有vertical-align:middle风格。

jsFiddle（有一些额外的款式有示范）

来源

2014-08-30 21:01:15 Will

把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%); 
}

来源

2014-08-30 21:27:24

无法在垂直线中间找到对齐按钮吗？

回答

相关问题