垂直对齐两个浮动元素

Question

I am using bootstraps classes to float both elements and have the email address vertically align with the edit button.

I have added the style attribute "style='vertical-align: middle'" on the parent margin so that both elements can be aligned vertically and the email still doesn't align in the middle.

<div class='container'>
  <div class='row' >
    <div class='col-md-4 col-md-offset-4'>
      <label for='email-add'>Email Address </label>
      <div id='email-add'  style='vertical-align: middle' class='clearfix'>
        <span class='pull-left'> testemail@testemail.com </span>
        <span class='pull-right'> <button  class='btn btn-default edit '>Edit</button></span>
      </div>
    </div>    
  </div>
</div>

http://jsfiddle.net/eldan88/x5jasdpv/

Answer 1

Here is an example of a more proper bootstrap style form. It only has the one label, input, and button, but you should be able to take this and modify it to add whatever other fields you need. Check out more info here http://getbootstrap.com/css/#forms

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <form> <div class='form-group'> <label for='email-add'>Email Address</label> <input type="text" id='email-add' class='form-control' value='testemail@testemail.com' /> </div> <div class="form-group"> <button class='btn btn-default edit'>Edit</button> </div> </form> </div> 

Answer 2

I think I understand what you mean, but I think where you are going wrong is in your HTML structure.

Fiddle -

 label[for="email-add"]{ display: inline-block; width: 80%; } .pull-right { float: right!important; margin: 10px; } .pull-left { float: left!important; } 

 <div class='container'> <div class='row' > <div class='col-md-4 col-md-offset-4'> <div id='email-add' style='vertical-align: middle' class='clearfix'> <label for='email-add'>Email Address </label> <span class='pull-right'> <button class='btn btn-default edit '>Edit</button></span> <span class='pull-left'> testemail@testemail.com </span> </div> </div> </div> </div>