垂直对齐按钮中间文本旁边

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

您可以使用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 2

您可以将“FMU”文本包装在元素中并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 3

可能感兴趣的是将区域进一步划分，以便您拥有更多控制权：

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

这允许更好地控制元素，这意味着您可以指定更好的位置。

您尝试的小提琴在这里：

小提琴

Answer 4

您可以将margin-bottom css-property添加到button元素，例如margin-bottom: 5px; http://jsfiddle.net/jhqjumgL/26/