在引导程序

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>

这会产生以下结果：

包含Bootstrap的

Here's a jsBin因此您可以看到问题。

除了标签之外，我应该使用一些元素吗？如果没有，我可以添加什么样的样式到标签，父div或div.btn工具栏，以便一切都垂直对齐？

Answer 1

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

要添加到jsBin的代码：

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

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

查看代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

工作示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;