垂直DIV對齊

Question

在我之前的問題中： Div左右，但頂部和底部居中？

當他們的父母過小時，我被幫助對齊2個DIV以使其居中定位，並在有空間的情況下很好地並排放置。

它像一種魅力一樣工作，但是我現在唯一的情況是文本需要垂直放置在父級DIV的中間。

到目前為止，在第一張圖片中，您看到了2個元素。 （圖像包裝在“ Pararight”中，文本包裝在“ Paraleft”中，它們都包裝在“ hitterbox”中）

當它們太小時，這就是它們對齊的方式。

但是，當頁面展開時，它看起來像這樣。

我想知道我將從哪里開始將子DIV對齊到擊球手（父）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中並排