Css 垂直DIV对齐

在我先前的问题中：

有人帮助我将两个DIV对齐，当它们的家长get太小时，它们可以上下居中，当有空间时，它们可以并排很好地坐在一起

它像一个魔咒，但我现在唯一的情况是文本需要垂直地坐在母div中间。 到目前为止，在第一张图片中，您可以看到2个元素。（图像用'Pararight'包装，文本用'Paraleft'包装，两者都用'hitterbox'包装）

这就是当它太小时它们的排列方式。

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

想知道我在哪里开始将孩子div垂直对齐在HITEBOX（母版）div的中间，而不会丢失下面的效果。 我尝试过的很多方法都阻止了移动的发生，导致文本偏离了位置，有些根本不做任何事情

代码的JSFIDLE链接在这里：如果您愿意，也可以放在下面

以下是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>

形象
毛里斯·塞德·奎斯·毛里斯·福西布斯·朗卡斯·艾格特·内克。莫比·马莱苏亚达·阿利奎姆·卢克图斯。Phasellus eu venenatis mauris，佩伦茨克汽水直径。这是一句名言，是一句名言。Fusce euismod faucibus justo non。

---

我还要指出，在JSFIDLE上，当您将箱子拉伸到板条箱室时，文本会与顶部对齐。这是否意味着什么，或者只是一个浏览器问题，我不能肯定。

我不确定是否100%理解您的问题，但这是您想要的吗

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

---

他们在这座桥上肩并肩

很有趣！我的问题是我把它应用到文本所在的地方。我想在中间对齐。你把它应用到我的影像部门。。。这个问题解决了！跳出DIV思考的方式！非常感谢！我想这就解释了相当困难的

垂直对齐

属性：