垂直DIV对齐

Question

在我之前的问题中：Div Left & Right but also top and bottom centred?

我帮助将2个DIV调整为顶级＆amp;当他们的父母太小而且在有空间的时候很好地并排坐在一起，他们会把自己放在居中的位置。

它就像一个魅力，但我现在唯一的情况是文本需要垂直位于父DIV的中间。

到目前为止，您在第一张图片中看到了2个元素。 （图像包含在'Pararight'和'Paraleft'文本中，它们都包含在'hitterbox'中）

当它太小时，它们是如何对齐的。

但是当页面展开时，它看起来像这样。

想知道我在哪里开始将儿童DIV对齐在hitterbox（父母）DIV的中间垂直对齐，而不会在下面失去这种效果。 我尝试过的许多方法已经停止了运动的发生，导致文本偏离位置，有些只是不做任何事情！

JSFiddle链接代码在这里：http://jsfiddle.net/6Dtqc/或者如果你愿意，可以放在下面！

这是CSS代码：

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;
}

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>

当你将盒子拉到箱子里时，还想指出jsfiddle文本对齐到顶部。这是否意味着什么，或者它只是一个浏览器，我无法肯定地说。

Answer 1

我不确定我是否100％理解你的问题，但这是你想要的吗？

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

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

他们在这个jsfiddle中并肩作战。