css - 垂直 DIV 对齐

Question

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

有人帮助我对齐 2 个 DIV，以便在它们的父级太小时将其顶部和底部居中，并在有空间时很好地并排放置。

它的效果非常好，但我现在唯一的情况是文本需要垂直放置在父 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 上指出，当您将盒子拉伸(stretch)到箱子空间时，文本会对齐到顶部。这究竟意味着什么，还是只是浏览器的问题，我不能肯定地说。

Answer 1

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

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

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

他们在这个 jsfiddle 中并排