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

Question

我想要将按钮垂直居中，这样它就可以更好地与文本配合。 我已经尝试使用center-block和text-center，但没有成功。 我希望有一个通用的解决方案，这样我就不需要硬编码margin、padding和类似的东西。

这是我的fiddle链接：http://jsfiddle.net/jhqjumgL/5/ 这是我的代码：

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

- Casper Thule Hansen

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>

- Nenad Vracar

---

这将删除文本和按钮之间的空格，如何保留它？ 啊，@ryachza提供了一个解决方案！ - Casper Thule Hansen

Answer 2

您可以将“FMUs”文本包装在一个元素中，并将其垂直对齐：

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>

< p > vertical-align 属性与兄弟元素相关，而不是容器元素。 < /p >

- ryachza

---

谢谢！我不知道 vertical-align 属性。 - Casper Thule Hansen

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

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

您可以在此处尝试的示例链接为： fiddle

- PeterS

Answer 4

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

- Heidel

---

我正在寻找一个更通用的解决方案。 - Casper Thule Hansen