如何将输入标签居中并连续输入？

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 来实现。所以我正在寻找引导解决方案。

JSFiddle demo

Answer 1

Bootstrap 提供了一种 Horizo​​ntal Forms 样式，看起来就像您正在寻找的那样：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，它将自动浮动到中心。

编辑

如果要垂直居中，需要多加一个div包裹输入框

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

CSS

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