垂直对齐按钮中间旁边的文字

Question

我想垂直对齐按钮到中间，所以它更适合与文本。 我已经尝试过没有任何运气的中心块和文本中心。 我想要一个通用的解决方案，所以我不用硬编码边距，填充和类似。

这里是我的小提琴：http://jsfiddle.net/jhqjumgL/5/ 我的代码：

<h3>FMUs 
    <button type="button" class="btn btn-default btn-xs"> 
    <span class="glyphicon glyphicon-plus"></span> 
    </button> 
</h3> 

Answer 1

你可以包裹在元素中的“森林经营单位”的文字和vertical-align那还有：

h3 > span { 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<h3><span>FMUs</span> 
 
     <button type="button" class="btn btn-default btn-xs"> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 
    </h3>

的vertical-align属性是相对于兄弟姐妹，而不是容器。

Answer 2

可以margin-bottom CSS属性添加到button元素，例如margin-bottom: 5px;http://jsfiddle.net/jhqjumgL/26/

Answer 3

您可以使用Flexbox

h3 { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h3>FMUs 
 
    <button type="button" class="btn btn-default btn-xs"> 
 
    <span class="glyphicon glyphicon-plus"></span> 
 
    </button> 
 
</h3>

Answer 4

可能会感兴趣的是什么了进一步让你有更多的控制权划分区域：

<h3> 
    <div class="container"> 

    <span class="text"> 
    FMUs 

    </span> 
    <span class=="button"> 
    <button type="button" class="btn btn-default btn-xs"> 
    <span class="glyphicon glyphicon-plus"></span> 
    </button> 
    </span> 
    </div> 
</h3> 

而且款式：

button, 
textarea { 
    vertical-align: middle; 
} 
.container { 
    display: inline-block; 
    height: 100px; 
} 
.text, .button { 
    vertical-align: middle; 
} 

这是什么让是在你的元素更好的控制并意味着您可以指定更好的位置。

你去尝试的小提琴是在这里：

fiddle