How to vertically center text in a column

rickmatt

I would like to vertically center the text displayed in the header image in this page: https://hillpartners.wpengine.com/who-we-are/ 

Can you please help?

(I want to vertically center the text inside the div tag called hero-right) 

<div class="hero-right">Hill Partners, Inc. is a commercial real estate firm that specializes in innovative retail, mixed-use and lifestyle development solutions.</div>

.hero-right { 

   font-family: Open Sans; 

   font-size: 24px; 

   line-height: 30px; 

   color: #ffffff; 

   vertical-align: middle; 

   text-align: left; 

}

Thanks,

Rick

Bryan

Hi,

The equal height of wraps is used to position elements on: top, middle or bottom in wraps. In order to achieve this you need to:
1. Edit your page, and go to the muffin builder. Edit a section and under the advanced>style select 'equal height of wraps'. See screens:
http://prntscr.com/f40hvn
http://prntscr.com/f40kh0
2. Now edit each wrap in that section and set the desired vertical align(top, middle or bottom). See screens:
http://prntscr.com/f40kvr
http://prntscr.com/f40lhl

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rickmatt

Thank you! That worked!

But can you tell me why my vertical line in the wrap between the title and the text no longer shows up?

Same page:  https://hillpartners.wpengine.com/who-we-are/

<div style="height: 100%" class="hero-vertical-line"></div>

.hero-vertical-line {

  width: 4px;

  color: #ffffff;

  background-color: #ffffff;

  margin-left: 50%;

}

Bryan

Probably because you have not declared any height

Learn more: Video Tutorials | How To | FAQ Vote on what comes next