Vertically Centering ul/li Text Relative to an Image - html

Question

Sorry if this has been asked before, but I've looked at several other similar questions trying to incorporate the solution with little success. I have a bootstrap row with two col-md-6's. In the first column is the image, and in the second column is a list . What i would like to do is vertically center the list relative to the image.
Here is what my HTML looks like:
<div class="row ">
<div class="col-md-6">
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6" >
<h4 style="font-size: 20px; line-height: 2; ">
My heeader:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->
Any idea on how I can accomplish this, thanks.

Answer 1

Looking around I managed to find this bit of code that works:
<!-- CSS -->
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
<!-- HTML -->
<div class="row ">
<div class="col-md-6 vcenter"> <!-- NEW -->
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6 vcenter" > <!-- NEW -->
<h4 style="font-size: 20px; line-height: 2; ">
My heeader:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->

Answer 2

try this. it works for me....
you must add this css to your code:
.col-md-6 ul{
height:inherit;
display: table-cell;
vertical-align:middle;
width: 100%;
}