How do I vertically align a large-font label with an input group in Bootstrap?

Question

I want to place a label horizontally adjacent to an input group. The problem is that the label doesn't align vertically with the input group. The input group hugs the top of the box (i.e. row); the label itself is determining the height of the row. I'm able to hack it by adding margin-top to the input-group class, but I don't feel like that's a very responsive solution

I've looked at the following SO entries. The difference is that I want a larger font-size so these solutions don't work:

• How to vertically align label and input in Bootstrap 3?
• Why does using an input group break the baseline alignment in bootstrap?
• Bootstrap: How to place button next to input-group

Fiddle here: 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;
}

I am using Bootstrap 3.

Answer 1

You can use display: inline-block; and vertical-align: middle or you can use display:flex; both will help, just add one more div and width

#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

here is working demo with changes in your code. you can set any elements in vertical alignment middle by giving 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;
}