What am I missing on this css vertical centering?

On this page, I'm trying to center the text for the order steps vertically so that it looks better in relation to the images, It just will not cooperate. https://www.stadriemblems.com/order_process/

I'm using this CSS:

.process-text {
		display: table;
		height: 100%;

	}
	.process-text-elements {
		display: table-cell;
    	vertical-align: middle;
		height: 100%;
	}	

Select allOpen in new window

And this HTML:

 <div class="row">
       <div class="col-md-4 col-xs-12">
       <div class="process-text">
      <div class="process-text-elements">
      <div class="process-number">1</div><div class="clear-div"></div>
      <h2>Request a Quote</h2>
       <p>The first step is to let us know the basic details of your order.
We need to know the quantity, size, backing, and the date you need your order by to give you an accurate price quote. </p></div></div></div>
       <div class="col-md-8 col-xs-12">
       <img src="{% static 'images/orderprocess-uploadartwork.jpg' %}" class="img-responsive">
       </div>
       </div>

Select allOpen in new window

I assume it's not working because it's not obeying the width:100% that I have defined, but I'm not entirely sure why. Perhaps when elements are displayed as a table you can't put % height values on them? I don't know.

Is there a better way to do this?