html - 如何在 bootstrap 中将 div 垂直居中？

Question

我有以下 html 代码:

<div class="text-center">
 <div class="row">
    <div class="col-md-6" id="centeredVertically">

        <div class="col-md-12">gdsgdsgdsgdshf</div> 
        <div class="col-md-12">gdsgdsgdsgdshf</div> 
        <div class="col-md-12">gdsgdsgdsgdshf</div> 
        <div class="col-md-12">gdsgdsgdsgdshf</div> 
        <div class="col-md-12">gdsgdsgdsgdshf</div> 
        <div class="col-md-12">gdsgdsgdsgdshf</div> 


    </div>
    <div class="col-md-6"><img src="http://cg.cs.uni-bonn.de/aigaion2root/attachments/poplar-leaves.png-fd1e71ded8cdc260ea04806113869bc3.png" alt="tree"></div>
</div>
    <h4>header.</h4>
    <p>hey there</p>
    <div class="paddown">

        <a class="btn btn-default" name="close" id="close" >Close</a>
    </div>
</div>

当您将网页调整得足够宽时 - 有两个 div 彼此相邻。我希望带有文本 centeredVertically 的 div 在 TreeMap 片的左侧垂直居中。我尝试遵循其他堆栈溢出帖子的最佳答案之一，并将此 css 类添加到我的 div 中:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

但它并没有起到作用。我该如何解决？

我的 fiddle 在这里 http://jsfiddle.net/2wujw71x/12/

谢谢。

Answer 1

你可以使用这样的东西(使用表格):

HTML:

<div class="text-center">

  <div class="row row-same-height">

    <div class="col-md-6 col-md-height col-middle">

      <div>gdsgdsgdsgdshf</div> 
      <div>gdsgdsgdsgdshf</div> 
      <div>gdsgdsgdsgdshf</div> 
      <div>gdsgdsgdsgdshf</div> 
      <div>gdsgdsgdsgdshf</div> 
      <div>gdsgdsgdsgdshf</div> 

    </div>

    <div class="col-md-6  col-md-height col-middle">
      <img src="http://cg.cs.uni-bonn.de/aigaion2root/attachments/poplar-leaves.png-fd1e71ded8cdc260ea04806113869bc3.png" alt="cat">         
     </div>

  </div>

  <h4>Header</h4>

  <p>Hey there</p>

  <div class="paddown">
    <a class="btn btn-default" name="close" id="close" >Close</a>
  </div>

</div>

CSS:

.row-same-height {
  display: table;
  width: 100%;
}
.row-same-height.img-responsive {
  width: 100% !important;
  max-width: 100% !important;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}
@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

FIDDLE

此 CSS 允许您拥有相同高度的列，并且可以将它们放在中间。这甚至适用于 IE8。

您可以在 this page 上阅读更多相关信息.