html - 在 Bootstrap 中垂直对齐标题元素和按钮工具栏

Question

我在我的页面中使用了 Bootstrap 3 按钮工具栏，但遇到了垂直对齐按钮工具栏和按钮标签的问题 - 它们看起来是“底部对齐”，但我更希望它们是垂直居中。

<div id="share-privacy-selector">
  <label>Sharing:</label>
  <div class="btn-toolbar" role="toolbar" style="display: inline-block;">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Public</button>
      <button type="button" class="btn btn-default">Hidden</button>
      <button type="button" class="btn btn-default">Private</button>
    </div>
  </div>
</div>

这会产生以下内容:

Here's a jsBin包含 Bootstrap，因此您可以看到问题。

除了 a 之外，我还应该为我的标签使用其他元素吗？如果不是，我可以向标签、父 div 或 div.btn-toolbar 添加什么样的样式，以便所有内容都垂直对齐？

Answer 1

尝试在 label 和 toolbar 上使用 vertical-align: bottom。

要添加到您的 jsBin 的代码:

#share-privacy-selector > .btn-toolbar,
#share-privacy-selector > label {
    vertical-align: bottom;
}

提示:通常是vertical-align: middle，但在您的情况下，它会将label 置于 之上工具栏。

查看代码片段:

#share-privacy-selector > .btn-toolbar,
#share-privacy-selector > label {
  vertical-align: bottom;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
rel="stylesheet" type="text/css" />

<div id="share-privacy-selector">
  <label>Sharing:</label>
  <div class="btn-toolbar" role="toolbar" style="display: inline-block;">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Public</button>
      <button type="button" class="btn btn-default">Hidden</button>
      <button type="button" class="btn btn-default">Private</button>
    </div>
  </div>
</div>