We help IT Professionals succeed at work.
Get Started

What am I missing on this css vertical centering?

Last Modified: 2018-01-12
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%;

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

Open 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?
Watch Question
Most Valuable Expert 2017
This problem has been solved!
Unlock 4 Answers and 6 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE