Question

我想将标签与同一行中的输入对齐，标签居中。如果我使用类label label-default（这是我喜欢的方面），它会将标签对齐在顶部。

以下是一个示例：

<div class="form-group form-horizontal form-group-sm vertical-align">
    <label for="InputFieldA" class="label control-label label-default col-xs-4">Any</label>
    <div class="col-xs-8">
        <input type="text" class="form-control input-sm" id="InputFieldA" placeholder="InputFieldA">
    </div>
</div>

我已经搜索并测试了许多解决方案，但没有一个（float:none，vertical-align: middle可以嵌入带有类形式内联的表单标记等等。

我读了一些7px的边距添加（未尝试），但我认为它与Bootstrap phiolosophy不一致，所有组件都可以响应设备的大小调整大小。

我不是HTML + Bootstrap 3 + CSS的专家，需要一些帮助。

Answer 1

在相对定位的<label>元素中使用绝对定位的元素：

.col-xs-4 {
    height: 30px;
    position: relative;
}
.label-default {
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

请参阅演示：https://plnkr.co/edit/4pXvqFcgKx7h8P9rJ0Yc?p=preview

Answer 2

你去.. 您可以使用文本中心类将文本放到中心，并使用以下代码进行操作。我正在使用凉亭来获取组件，所以我已经相应地提到了链接。如果我误解了你的问题，请纠正我。

<html>
<head>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <style>
    .myLabel{
        display: inline-block;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
    }

    </style>
</head>
<body ng-app="myApp">
    <div class="well-sm"></div>
    <div class="row">
        <div class="">
            <label class="myLabel text-center label label-default col-xs-offset-2 col-md-1 col-xs-2">Any
            </label>
            <div class="col-xs-6 col-md-2">
                <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
            </div>
        </div>
    </div>
</body>

</html>

Answer 3

试试这个......

 <div class="form-group form-horizontal form-group-sm col-lg-6 col-lg-offset-3 contr">
   <label for="InputFieldA" class="label control-label label-default col-xs-2"><p class="text-center">Any</p></label>
    <div class="col-xs-10">
        <input type="text" class="form-control input-sm" id="InputFieldA" placeholder="InputFieldA">
    </div>
 </div>

标签以输入为中心（Bootstrap 3）

3 个答案: