Question

我正在使用bootstraps类来浮动这两个元素，并使电子邮件地址与编辑按钮垂直对齐。

我在父边距上添加了样式属性“style ='vertical-align：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

以下是更合适的引导程序样式表单的示例。它只有一个标签，输入和按钮，但你应该能够接受并修改它以添加你需要的任何其他字段。点击此处了解更多信息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

我想我理解你的意思，但我认为你的错误在于你的HTML结构。

小提琴 -

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>

垂直对齐两个浮动元素

2 个答案: