What am I missing on this css vertical centering?

Marisa
Marisa used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Juana VillaFront-end Developer
Commented:
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.
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.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

MarisaWeb Design

Author

Commented:
Looks like the flex thing worked, however, the elements are no longer obeying the col-xs-12 requirement. Why would that be?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can use a media query for this
.vertical-align {
   display: block;
}

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

Open in new window

MarisaWeb Design

Author

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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial