Layout breaking due to possible parenting issue? - css

Question

I'm kinda stuck with this small issue that's breaking my layout. On the home page I have a blue box which is serving as my main container. Within my main container there are two more boxes which are on the right side of the screen which contain contact info. Also within the headline-container there is an H2 which say's -- "Satisfaction is our strongest point"
So what's wrong? Well nothing looks wrong atm but what if wanted to accurately center the H2 "Satisfaction is our strongest point" within it's headline-container which is the light blue large rectangle. So I write this CSS to try accurately center the text within headline-container
%align {
position: relative;
top: 50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
Hold my breath and bang crash..
My entire layout breaks..I'm thinking this due to a parenting issue with the H2. In my HTML I am inserting the h2 class just bellow the div class for large-8 columns which in this case is not the correct parent to (center the text within.) The element that I want to center the text within is headline-container (light blue box). To simply put it -- My layout seems to be breaking as soon as I change the h2's parent to headline-container and add the styles above.
Here is the HTML
<div class="headline-container">
<div class="row">
<div class="large-8 columns">
<h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>
<div id="contact-info" class="large-4 columns">
<div class="phone-box">
<div class="number">
<a id="phone-number" href="tel:[phone]">808-848-8821</a>
</div>
</div>
<div class="email">
<div class="email-box"><a id="email-contact" href="mailto:etoile#hawaii.rr.com">etoile#hawaii.rr.com</a>
</div>
</div>
</div>
</div>
</div>
I've used a temporary not so accurate way of centering my H2 by applying this padding to the text. It looks fine but something deep down tells me it's not 100% accurate and that bothers me..Any suggestions on why my layout is breaking?
padding-top: 40px;
Here's the link
http://kapena.github.io/pp_web/
Thax for reading and I look forward to you're suggestions and comments.

Answer 1

Setting a fixed height to the container (div.columns) of the h2 fixes this.
Example
<div class="large-8 columns">
<h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>
CSS
.columns {
height: 218px;
}
.satisfaction {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Answer 2

You could just use h2{text-align: center} or failing that .row{display: block; position: relative; margin: 0 auto; width: 100%;} you dont need the translates

Answer 3

try this for h1 element
h2{
display:inline-block;
margin: 0 auto;
}