centering contents of a div vertically without using height 100% - html

Question

hey guys i am trying to center contents of 2 divs vertically , basically the structure that i have is this :
<div>
<div class="left">
<span>
ONCE YOU <br>
PICK US, <br>
YOU WILL <br>
NEVER <br>
WANT TO <br>
GO <br>
ANYWHERE <br>
ELSE <br>
</span>
</div>
<div class="right">
<span>Abouts us</span>
<button class="about-btn">Know More</button>
</div>
</div>
and the technique i am using is the following , which i picked up from solution from a stackoverflow example :
span:after {
content:'';
height: 100%;
display: inline-block;
vertical-align: middle;
}
span {
display:inline-block;
vertical-align:middle;
font-weight: 700;
letter-spacing: -3px;
height: 100%;
}
the problem with this solution is that the is not the only content in the div and so its not viable for me to give the span height:100% as if i have to another element that comes after the span and since the span has a height of 100% in element is pushed outside the main container .
fiddle here.
Also another problem is the contents of the <div class="left"> are not vertically centered with this technique .
i am also trying the display:table solution but that seems to be messing up the layout .
can somebody please help me out with this.
EDIT:: i was trying to follow this solution , by hashem .
thank you .
Alex-Z.

Answer 1

Here's how it could be done with a table layout :
http://jsfiddle.net/xe6n14xq/
Identifying the parent a making it a table :
#wrap {
display: table;
width: 100%; // displaying as table makes the content shrink-wrap
}
Then the children can become vertically aligned table-cells :
.right, .left {
height: 500px;
width: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3em;
}
You could also do a vertical transform on the children's content :
http://jsfiddle.net/0sop57yc/
span, .about-btn {
display: block; // Chrome apparently doesn't agree with inline-block here
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Edit - not sure who added the width: 100% for the table but that was a good fix, thanks.