Question

我想将标签水平放置在输入组旁边。问题是标签没有与输入组垂直对齐。输入组拥抱盒子的顶部（即行）;标签本身正在确定行的高度。我可以通过将margin-top添加到输入组类来破解它，但我觉得这不是一个非常敏感的解决方案

我查看了以下SO条目。不同之处在于我需要更大的字体大小，因此这些解决方案不起作用：

在这里小提琴：http://jsfiddle.net/marvery/o315v0g9/10/

HTML

<div class='row'>
  <form class='col-xs-offset-2 col-xs-8' method="post">
    <label id="sign_up_form_tagline">Wanna try it?</label>
    <div class="input-group">
      <input class="form-control" id="email" name="email" placeholder="Email Address" type="email" value="">
      <span class="input-group-btn"> <button type="submit" class="btn btn-primary">Sign Up</button></span>
    </div>
  </form>
</div>

CSS

#sign_up_form_tagline {
  float: left;
  margin-right: 30px;
  text-align: right;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 34px;
}

.input-group{
  margin-top: 7px;
}

我正在使用Bootstrap 3。

Answer 1

您可以使用display: inline-block; and vertical-align: middle或者您可以使用display:flex;两者都有帮助，只需添加一个div和宽度

#sign_up_form_tagline {
  margin:0 0 0 10px;
  text-align: right;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 34px;
display: inline-block;
vertical-align: middle;
}

.holder{
width: 190px;
display: inline-block;
vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class='row'>
  <form class='col-xs-offset-2 col-xs-8' method="post">
    <label id="sign_up_form_tagline">Wanna try it?</label>
        <div class="holder">
    <div class="input-group">
      <input class="form-control" id="email" name="email" placeholder="Email Address" type="email" value="">
      <span class="input-group-btn"> <button type="submit" class="btn btn-primary">Sign Up</button></span>
    </div>    </div>
  </form>
</div>

Answer 2

这里是代码更改的工作演示。您可以通过display：table-cell设置垂直对齐中间的任何元素;

<强> HTML

<div class='row'>
  <form class='col-xs-offset-2 col-xs-8 set-form' method="post">
    <label id="sign_up_form_tagline">Wanna try it?</label>
    <div class="input-group">
      <input class="form-control" id="email" name="email" placeholder="Email Address" type="email" value="">
      <span class="input-group-btn"> <button type="submit" class="btn btn-primary">Sign Up</button></span>
    </div>
  </form>
</div>

<强> CSS

#sign_up_form_tagline {
  float: left;
  margin-right: 30px;
  text-align: right;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 34px;
}

.input-group {
  margin-top: 7px;
}

.set-form {
  display: table;
}

.set-form #sign_up_form_tagline {
  display: table-cell;
  vertical-align: middle;
  float: none;
  width: 50%;
  text-align: left;
}

.set-form .input-group {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  position: relative;
}

.set-form .input-group .input-group-btn {
  position: absolute;
  right: 0;
}

如何在Bootstrap中将大字体标签与输入组垂直对齐？

HTML

CSS

2 个答案: