Question

当标签占两行时，如何垂直对齐标签和输入？

这是我的代码：

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot de passe:</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="passwd_confirm" maxlength="32">
    </div>
  </div>
<form>

默认显示是输入和标签的第一行具有相同的基线，但我想将输入与标签的垂直中心对齐。

我该怎么做？

感谢。

Answer 1

如果您正在使用bootstrap3，则可以向父级添加一个类，使其成为flex行，然后使用align-items: center垂直居中。您可能还希望匹配padding-top: 7px元素的默认.control-label值，方法是删除该填充，或者将其添加到右列/输入作为填充或边距，具体取决于布局的其余部分

＆＃13;

.form-group.valign {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .valign input {
    margin-top: 7px;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
  <div class="form-group valign">
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot<br> de passe:</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="passwd_confirm" maxlength="32">
    </div>
  </div>
<form>

＆＃13;

Bootstrap 3形式水平，带有双线标签

1 个答案: