CODEWITHSUNDEEP
csstwitter-bootstrap
Lez Yeoh
Lez Yeoh

Reputation: 350

how to middle vertical-align using bootstrap input-group

I've looked at other posts on how to vertical-align: middle with bootstrap. That works fine.

What I'm trying to do is to create a search bar with a "go" button as per standard bootstrap (http://getbootstrap.com/components/#input-groups-buttons) that is vertically aligned in a div as seen here:

<div class="col-lg-6 vcenter">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->

Problem I have is the minute I try to add in css to vertically align it, everything goes crazy and it's no longer aligned:

.vcenter {
    height: 375px;
    line-height: 300px;
}

.vcenter input, .vcenter span{
    display: inline-block;
    vertical-align: middle;
}

Any help would be appreciated.

Upvotes: 1

Views: 11610

Answers (1)

vignesh
vignesh

Reputation: 1011

Please refer the code:

Remove the css following css:

 .vcenter {
    height: 375px;
    line-height: 300px;
}

.vcenter input, .vcenter span{
    display: inline-block;
    vertical-align: middle;
}

and update as simple:

.vcenter {
    margin-top:50px;
}

    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12 vcenter">
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
  </div>
</div>

Upvotes: 2

Related Questions