Div Left＆amp;正确但顶部和底部居中？

Question

所以我试图创建这种效果，当窗口被拉得足够大时，两个div并排排列，但是当做得更小时，div会叠加在彼此之上并且整齐地居中。

到目前为止，我有这个观点。

包装图像的DIV的CSS是：

div.pararight {
width:451px; 
height:272px; 
margin:0px auto; 
position:relative;} 

标题为＆＃39; Pararight＆＃39;因为当屏幕很宽时，div应该与右边的图像并排放置。

包装文本的DIV的CSS是：

div.paraleft {
width:480px;
margin:0px auto;
position:relative;}

命名＆＃39; paraleft＆＃39;因为文本将对齐左侧。

提到这一点也很重要。我认为，这两个DIV包含在另一个DIV中：

div.hitterbox {
width:100%; 
margin: 0px auto; 
font-family: sans-serif; 
font-size: 13pt; 
line-height:18pt}

主要是因为页面上会有多个这些hitterbox div，并且复制粘贴和更改HTML内容会更容易，但是不需要解释这个问题，尽管我不会这样做。请求你的帮助！

最后另一条信息是持有hitterbox的容器是另一个拥有CSS的DIV：

div.pagecontent {
padding:10px; 
font-family: sans-serif;
font-size:12pt; 
position:static;
text-align:center;}

最后是HTML全部：

<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272"  alt="Mac   Book"/></div>
<div class="paraleft">The Onscreen Text</div>

</div>
</div>
</div> 

我把paraleft放在paraleft上面，所以你可以看到它上下左右对齐。下面提到的所有DIV的白页容器目前是1200px宽，所以足够的空间可以并排坐在这两个人身上。

我需要做什么才能使文本DIV移动到图像的一侧，图像移动到右侧。我在相应的DIV中使用了float：left，float：right但是当它缩小以创建堆栈效果时，它们分别左右移动，直到用户将页面缩小到480px时文本将居中但图像仍会略微向右浮动。

我在这里做错了什么？ ：○

Answer 1

我会使用display: inline-block，然后在父元素中添加text-align: center。

JSFiddle：http://jsfiddle.net/gW8r2/1

.parent {
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
}

.parent > div {
    display: inline-block;
}

.a {
    width: 100px;
    height: 100px;
    background: red;
}

.b {
    width: 200px;
    height: 100px;
    background: blue;
}

这是一个通用的解决方案。在您的情况下，.parent为.hitterbox，.a为.paraleft，.b为.pararight。