标签以输入为中心（引导程序 3）答案

【问题标题】：Label centered with input (Bootstrap 3)标签以输入为中心（引导程序 3）
【发布时间】：2016-05-28 18:28:26
【问题描述】：

我想将标签与同一行中的输入对齐并且标签居中。如果我使用 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、嵌入到带有 form-inline 类的表单标签中等等）。

我阅读了一些 7px 边距添加（未尝试过），但我认为这与 Bootstrap 哲学不一致，所有组件都可以根据设备的大小调整大小。

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

【问题讨论】：

标签： html twitter-bootstrap-3

【解决方案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

【讨论】：

我的身高标签是正确的。只是我希望标签在中间而不是在顶部。
我可以在垂直和水平的中间看到它。你用什么浏览器？
我使用 Chrome。您的示例已对齐，但您更改了标签的高度。
所以你想要这样的东西吗？ plnkr.co/edit/4pXvqFcgKx7h8P9rJ0Yc?p=preview
我只是用<div> 包裹了标签，然后使用top 和transform 厚将标签垂直居中。

【解决方案2】：

试试这个....

 <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>

【讨论】：

不起作用。
标签增加了高度，但没有居中对齐：imgur.com/bIfhY1Z
请在
标签中试试这个....

任何
我想保持这样的标签方面：imgur.com/GXpF2ux

【解决方案3】：

给你.. 您可以使用 text-center 类将文本置于中心位置，并根据您的目的使用以下代码。我正在使用凉亭来获取组件，因此我已经相应地提到了链接。如果我误解了您的问题，请纠正我。

<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>

【讨论】：

您正在更改标签的高度。如果我尝试您的示例省略您的行高，它会将标签保持在顶部。
好的。在中心水平和垂直对齐。
没有。您的示例将文本正确对齐，但深色背景已调整大小：！ imgur.com/cSxIl1p我想要这样的：！ imgur.com/GXpF2ux
对不起，不。它更好，但不断修改背景的标签高度imgur.com/U2d5Wg8
我终于把form-control中的所有样式都添加到了label中。我想这次会做得很好。