如何在Bootstrap中將大字體標簽與輸入組垂直對齊？

Question

我想將標簽水平放置在輸入組的附近。 問題在於標簽未與輸入組垂直對齊。 輸入組擁抱框的頂部（即行）； 標簽本身將確定行的高度。 我可以通過在輸入組類中添加margin-top來破解它，但是我覺得這不是一個非常敏感的解決方案

我看了以下SO條目。 區別在於我想要更大的字體，因此這些解決方案不起作用：

• 如何在Bootstrap 3中垂直對齊標簽和輸入？
• 為什么使用輸入組會破壞引導程序中的基線對齊？
• 引導程序：如何在輸入組旁邊放置按鈕

在這里提琴： 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: 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;
}