在引导程序中垂直对齐标题元素和按钮工具栏答案

【问题标题】：Vertically aligning a header element and button toolbar in bootstrap在引导程序中垂直对齐标题元素和按钮工具栏
【发布时间】：2016-11-10 09:31:18
【问题描述】：

我在我的页面中使用 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 添加什么样的样式，以便所有内容都垂直对齐？

【问题讨论】：

标签： html css twitter-bootstrap alignment vertical-alignment

【解决方案1】：

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

要添加到 jsBin 的代码：

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

提示：通常是vertical-align: middle，但在您的情况下，它会将label 定位在高于toolbar 的位置。

查看 sn-p：

#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>

【讨论】：

【解决方案2】：

只需将您的显示规则从block 更改为table-cell 并应用vertical-align:middle。

工作示例：

#share-privacy-selector label,
#share-privacy-selector .btn-toolbar {
  vertical-align: middle;
  display: table-cell;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="share-privacy-selector">
  <label>Sharing:</label>
  <div class="btn-toolbar" role="toolbar">
    <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>

【讨论】：