如何在引导程序中将div垂直居中？

Question

I have a following html code:

<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>

and when you resize the webpage wide enough - there are two divs next to each other. I want the div with the text centeredVertically to be vertically centered on the left side of the tree's picture. I tried following one of top answers from other stack overflow posts and I added this css class to my divs:

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

but it didn't do the trick. How can I fix it?

My fiddle is here http://jsfiddle.net/2wujw71x/12/

Thanks.

Answer 1

You can use something like this (using tables):

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

This CSS allows you to have columns with the same height and you can position them in the middle. This works even on IE8.

You can read more about this on this page .