Bootstrap CSS Alignment

我一直在试图让一些对齐工作，但我很难成功。我不确定是否已经有CSS样式用于竖直对齐的引导，但这正是我想要完成的。Bootstrap CSS Alignment

我有一个DIV（.well类）的图像和一些文字在里面。图像对齐精细，因此其高度和位置很好。但是，我试图在中间垂直对齐按钮和文本。

这里是一个的jsfiddle：http://jsfiddle.net/6z9skpeh/

<div class="col-md-6"> 
    <div class="well wellFriends"> 
     <div class="row"> 
      <div class="col-md-4 friendPic"> 
       <img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive"> 
      </div> 
      <div class="col-md-8 friendDetails"> 
       <div class="row"> 
        <div class="col-md-6"><strong>Bob Smith</strong> 
         <br><em>Department Name</em> 
        </div> 
        <div class="col-md-5 pull-right"> 
         <!-- Single button --> 
         <div class="btn-group pull-right"> 
          <button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span> 

          </button> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Action</a> 
           </li> 
           <li><a href="#">Another action</a> 
           </li> 
           <li><a href="#">Something else here</a> 
           </li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

这是我到目前为止有： enter image description here

这就是我要做的： enter image description here

来源

2015-02-10 SBB

http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-浏览器看看正确的答案 – 2015-02-10 07:07:06

http://stackoverflow.com/questions/11184868/vertically-center-bootstrap-btn-in-well-class可能的重复？ – grownupteeth 2015-02-10 15:28:55

你可以尝试这样的：demo

个CSS：

.v_align { 
    font-size: 0; 
} 
.v_align >[class*="col"] { 
    float: none; 
    font-size: 14px; 
    display: inline-block; 
    vertical-align: middle; 
}

HTML：

<div class="row v_align">..</div>

来源

2015-02-10 07:20:13

Bootstrap CSS Alignment

回答

相关问题