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%;
	}	

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

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?
LVL 1
MarisaWeb DesignAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Juana VillaFront-end DeveloperCommented:
The problem is that the elements are floating. You can do this: (NOTE: I removed the floating:left;)

.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    display: inline-block;
    vertical-align: middle;
}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    display: inline-block;
    vertical-align: middle;
}

Open in new window


By making them inline-block you can tell them to be vertically positioned top, bottom, or middle.
0
Slick812Commented:
greetings  Marisa , , ,  I looked at your Page and at the  <div class="process-text-elements">  in the browser "inspect Element", and the <div> containers for that process-text-elements, and you ae trying to do something with the CSS "vertical-align" that the Bootstrap was not designed to do, using the <div> structure you have. First I think the process-text-elements may be doing the vertical centering for it's content, However, it is only as HIGH as its contents require, you do have a <div> with CSS    height: 100%;    BUT you use the wrong container to have that height assigned to it, for an inner <div> with a  CSS    vertical-align: middle;
If you want to try and use that table CSS stuff, then you may should not use the Bootstrap at all for that div segment (row). BUT the table stuff may not be a way to do this? As Juana has suggested using an    "inline-block"  may can help, , BUT There are Factors that you MUST deal with if you take that route, that are different than coding using the  old    float:left  CSS.

If I were doing this with the right side as       col-md-8 col-xs-12       and a more or less unchanging Content (as I see there). .  I would just add a single <div> with top padding or margin to the  <div class="col-md-4 col-xs-12"> to lower the contents and center them.
0
Julian HansenCommented:
You can use flex to do this.

Give your row's another class - say vertical-align
<div class="row vertical-align">

Open in new window

Then add this
.vertical-align {
   display: flex;
}

Open in new window

While most browsers support the flex model not all of the older ones do - my response to any comments in this direction is:

This change is not a breaking change - it is cosmetic. Most browsers will render as you wish - those that don't support flex will align with the top of the row - which (while not exactly what you want) is not such a radical deviation that it justifies the effort required to get the same effect across older browsers.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

MarisaWeb DesignAuthor Commented:
Looks like the flex thing worked, however, the elements are no longer obeying the col-xs-12 requirement. Why would that be?
0
Julian HansenCommented:
You can use a media query for this
.vertical-align {
   display: block;
}

@media (min-width: 768px) {
   .vertical-align {
      display: flex;
   }
}

Open in new window

0
MarisaWeb DesignAuthor Commented:
Thank you all for your contributions! They all looked like they could have been viable solutions, but I tried Julian's first because it looked the simplest an that worked.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.