Twitter bootstrap 3 boostrap 3元素旁边垂直居中的文本

Twitter bootstrap 3 boostrap 3元素旁边垂直居中的文本,twitter-bootstrap-3,vertical-alignment,Twitter Bootstrap 3,Vertical Alignment,嘿,我正在使用Bootstrap3制作网页,我一直遇到一个问题。当我有一个容器,然后在它里面有一个按钮旁边的一些文本,或者一个文本字段或一个下拉列表,文本在垂直方向上永远不会像按钮、文本字段等那样大,因此永远不会与元素垂直居中 我做了一个js小提琴的例子,你可以很快看到我在说什么 这似乎与引导,或者也许css一般应该有一种方法来解决这个问题。提前谢谢你对我的帮助 小提琴中的代码如下: HTML 如果您想要文本旁边的下拉列表: .display-inline {display:inline} .d

嘿,我正在使用Bootstrap3制作网页,我一直遇到一个问题。当我有一个容器,然后在它里面有一个按钮旁边的一些文本,或者一个文本字段或一个下拉列表,文本在垂直方向上永远不会像按钮、文本字段等那样大,因此永远不会与元素垂直居中

我做了一个js小提琴的例子,你可以很快看到我在说什么

这似乎与引导,或者也许css一般应该有一种方法来解决这个问题。提前谢谢你对我的帮助

小提琴中的代码如下:

HTML

如果您想要文本旁边的下拉列表:

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

选择一个东西:

.col-xs-12 {
    border:1px solid red;
}
<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>
<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>
.display-inline {display:inline}
.display-inline {display:inline}
.display-inline-block {display:inline-block}
  <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>