如何在引導程序中將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在樹的圖片的左側垂直居中。 我嘗試遵循其他堆棧溢出帖子的最佳答案之一，並將此css類添加到div中：

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

但這並不能解決問題。 我該如何解決？

我的小提琴在這里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;
}

小提琴

該CSS允許您具有相同高度的列，並且可以將它們放置在中間。 即使在IE8上也可以使用。

您可以在此頁面上閱讀有關此內容的更多信息。