所以我试图创建这种效果，其中当窗口拉到足够大的两个div对齐并排，但是当较小上述对方的div栈和中心整齐。

So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.

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

So far I have this view.

的CSS的DIV包裹的形象是：

The CSS for the DIV wrapping the image is:

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

名为Pararight，因为当屏幕是广本的div应该并肩坐在右边，图像

Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.

的CSS的DIV包裹的文字是：

The CSS for the DIV wrapping the text is:

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

命名'paraleft'作为文本将调整到左边。

Named 'paraleft' as the text will align to the left.

同样重要的是不在话下。我认为，这两个的DIV被包裹在另一个分区是：

It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:

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

这主要是因为将有多个这些hitterbox div的这个页面，这是比较容易复制粘贴并更改HTML内容，不需要解释，虽然我要求你的帮助！

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

Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:

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

最后，HTML的一切：

Finally the HTML for it all:

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

我把pararight上面paraleft所以它对准上下这种方式，你可以看到。以下提到的所有的DIV的白色页面容器1200像素宽的时刻让出足够的空间并排坐在这两个家伙的一面。

I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.

什么，我需要做的文字DIV移动到图像的边和形象的权利。我已经使用浮动：左，浮动：就在各自的DIV但是当它缩小到产生烟囱效应，他们正在转向左，右中，直到用户缩小页面到480px当文本将居中但图像还是会略有浮动权。

What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.

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

What have I done wrong here? :o

推荐答案

我会使用显示：inline-block的，然后添加文本对齐：中心的父元素

I would use display: inline-block, then add text-align: center in the parent element.

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

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 。

This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.