如何将输入标签和输入集中在一起？

Question

我有这段代码：

<div class="well">
    <form role="form" id="shop-order" method="post" action="">
        <div class="row">
            <div class="form-group">
                <div class="col-md-3">
                    <div class="pull-right">
                        <label for="name">Label</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <select class="form-control" name="clientId">
                        $options
                    </select>
                </div>
            </div>
        </div>
        // possibly other rows...
</div>

此代码的结果如下：

我不知道如何将标签和输入连接起来。我希望它们在一行上：标签中间位于输入中间的对面。

我怎么能这样做？或者我可能是我的HTML错了，这可以通过正确的HTML来实现吗？

我正在寻找引导方法，据我所知，它可以通过line-height来实现。如果我找不到，我会按line-height来实现引导解决方案。所以我正在寻找 bootstrap解决方案。

JSFiddle demo

Answer 1

Bootstrap提供了一种水平表单样式，看起来像您正在寻找的样式：http://getbootstrap.com/css/#forms-horizontal

工作小提琴：http://jsfiddle.net/Nv9Q5/1/

代码：

<div class="well">
  <form class="form-horizontal">
      <div class="form-group">
          <label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
          <div class="col-sm-10 col-md-10">
              <select class="form-control" name="clientId">
                  <option>one</option>
              </select>
          </div>
      </div>
  </form>
</div>

Answer 2

设置标签的css line-height以匹配输入的高度。你必须四处寻找合适的价值。

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Answer 3

输入元素已经是内联级元素。如果您将text-align:center添加到父div，它将自动浮动到中心。

EDITS

如果你想垂直居中，你需要再添加一个包裹输入框的div

<div class="vertically_center">
  <input type="text">
</div>

CSS

.vertically_center {
   display: table-cell;
   height: 200px;
   vertical-align: center;
}