bootstrap 3 在元素旁边垂直居中文本答案

【问题标题】：boostrap 3 vertically centering text next to elementsbootstrap 3 在元素旁边垂直居中文本
【发布时间】：2014-02-03 02:21:40
【问题描述】：

嘿，我正在使用 bootstrap 3 制作网页，但我一直遇到一个问题。当我有一个容器，然后在它里面有一些文本旁边的按钮、文本字段或下拉菜单时，文本永远不会像按钮、文本字段等那样垂直大，所以永远不会结束与元素垂直居中。

我做了一个 js fiddle 例子，你可以很快看到我在说什么。 http://jsfiddle.net/8h3WB/1/

似乎使用 bootstrap 或一般的 css 应该有解决此问题的方法。提前感谢您提供的任何帮助。

小提琴中的代码如下：

HTML

<div class="col-xs-12">
    <p class="pull-left">press button</p>
    <button type="button" class="btn btn-lp pull-left">Save</button>    
    <br class="clear-fix" />
</div>

CSS

.col-xs-12 {
    border:1px solid red;
}

【问题讨论】：

标签： twitter-bootstrap-3 vertical-alignment

【解决方案1】：

http://jsbin.com/eqeNisIh/1/edit

<form class="form-inline" role="form">
<div class="form-group">
    <lable>press button</lable>
    <button type="button" class="btn btn-default">Save</button>    
</div>
</form>

或

<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <lable>press button</lable>
      <button type="button" class="btn btn-default">Save</button>    
  </div>
  </form>
</div>

Bootstrap 3.x 和表单有几种方法。如果它不是表单，您将使用内联标签（如跨度），或者将 p 标签修改为 display:inline;

<div class="container">
      <span>press button</span>
      <button type="button" class="btn btn-default">Save</button>    
</div>

或

  <div class="container">
      <p class="display-inline">press button</p>
      <button type="button" class="btn btn-default">Save</button>    
</div>

CSS

.display-inline {display:inline}

如果你想要文本旁边的下拉菜单：

.display-inline {display:inline}
.display-inline-block {display:inline-block}

HTML：

  <p class="display-inline">Pick a something:</p> <div class="dropdown display-inline-block">
          <a href="#" class="btn btn-default btn-plus dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small></a>
          <ul class="dropdown-menu">
              <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a></li>
              <li class="nav-divider"></li>
              <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a></li>
          </ul>
  </div>

【讨论】：