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

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属性是相对于兄弟姐妹的，而不是相对于容器的。