troubleshooting Question

What am I missing on this css vertical centering?

Avatar of Marisa
MarisaFlag for United States of America asked on
CSSHTMLWeb Languages and Standards
6 Comments4 Solutions174 ViewsLast Modified:
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.

I'm using this CSS:

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

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

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

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?
Join our community to see this answer!
Unlock 4 Answers and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 4 Answers and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros