CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sato
Sato

Reputation: 8592

How to put button and some text in one row, and make text vertical-align: middle;?

I can make it in one line ( If there is any better solution, please tell me ), but I cannot make the text vertical-align in the middle.

   #info{
     vertical-align: middle;

    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3">
<div id="save">
    <div class="pull-left">
      <button type="button" class="btn btn-default"> 
          save
        </button>
    </div>
    <div class="pull-right" id="info">info</div>
    <div class="clearfix"></div>
  </div>
          </div>
      </div>
</div>

Upvotes: 1

Views: 643

Answers (1)

Luis Rivera
Luis Rivera

Reputation: 517

The problem your are having to align the button and #info is that bootstrap is styling the button, but your div#info is not styled equally.

Just keep in mind to add similar styles to #info so it gets similar position. In this case all you need is:

#info {
    display:inline-block;
    padding: 6px 12px;
    line-height:1.42857143;
}

You can see it working here.

Upvotes: 1

Related Questions