Vertical DIV Alignment

Question

In my previous question: Div Left & Right but also top and bottom centred?

I was helped to align 2 DIV's to go top & bottom centring themselves when their parent get's too small and sit side by side nicely when there is room for it.

It worked like a charm but my only situation now is the text needs to sit in the middle of the parent DIV vertically.

So far in the first image you see the 2 elements. (Image is wrapped in 'Pararight' and Text in 'Paraleft' which are both wrapped in 'hitterbox')

This is how they align when it's too small.

But when the page expands out it looks like this.

Was wondering where I'd begin in aligning the Child DIVs to be vertically aligned in the middle of the hitterbox (parent) DIV without losing this effect below. A lot of the methods I've tried have stopped the movement happening, caused the text to be way off position and some just don't do anything!

JSFiddle link to the code is here: http://jsfiddle.net/6Dtqc/ or put in below if you prefer!

Here is the CSS code:

div#content {
width:100%;
max-width:1200px;
min-width:460px;
background: green;
margin: 0px auto;
margin-top:130px;
}
div.pagecontent {
padding:10px;
background-color:pink;
position:static;
text-align:center;
}
div.hitterbox {
width:100%;
margin: 0px auto;
text-align: center;
position:relative;
background-color:blue
}
.hitterbox > div {
display: inline-block;
}
div.paraleft {
min-width:440px;
width:100%;
max-width:480px;
background-color:grey
}
div.pararight {
width:401px;
height:242px;
background-color:white
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
display:block;
}

And the HTML:

<div id="content" class="clearfix">
<div class="pagecontent">
    <div class="hitterbox">
        <div class="pararight">Image</div>
        <div class="paraleft">Mauris sed arcu quis mauris faucibus rhoncus ac eget neque. Morbi malesuada aliquam luctus. Phasellus eu venenatis mauris, pellentesque sodales diam. Praesent aliquet ornare lorem, ut rhoncus elit consequat dictum. Fusce euismod faucibus justo non.</div>
    </div>
    </div>
</div>

Would also like to point out on jsfiddle the text aligns to the top when you stretch the boxes to crate room. Whether this means anything or it's just a browser thing I can't say for sure.

Answer 1

I'm not sure if I understand your problem 100%, but is this what you want?

div.pararight {
    width:401px;
    height:242px;
   --> vertical-align: middle;
    background-color:white
}

http://jsfiddle.net/6Dtqc/2/

They're side by side in this jsfiddle