如何在引导程序中将div与类右拉垂直居中对齐

Question

I want to create a form line with a label an input field and a button. The first two element should be align left the button should be aligned right. I've tried the pull-right class, but it ruins the vertical alignment of the button. I want it to be vertically centered. I've tried to set the line-height, but it ruins the vertical alignment of the label. (I want the label to be aligned vertically center relative to the input too)

<form class="form-horizontal">
   <div class="form-group col-sm-11">
       <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
       <div class="col-sm-3">
           <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
       </div>
   </div>
   <div class="pull-right">
        <button>Add</button>
   </div>
</form>

http://plnkr.co/edit/i8jmEowKaKOcM2P8N225?p=preview

Answer 1

As mentioned in the comments: To display multiple form elements in one row, use the form-inline class. This applies to forms within viewports that are at least 768px wide (so watch the example below in full screen to see the effect).

See Bootstraps documentation for more information.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <form class="form-inline"> <div class="form-group"> <label for="inputEmail3">Email</label> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> <div class="pull-right"> <button class="btn btn-default">Add</button> </div> </form>