Div Left&右边还是顶部和底部居中？ [英] Div Left & Right but also top and bottom centred?

问题描述

所以我试图创建这个效果，当窗口被拉得足够大时，两个div并排对齐，但是当divs堆叠在一起时，彼此之间并且整齐地居中。

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.

包装图像的DIV的CSS是：

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.

包装文本的DIV的CSS是：

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包装在另一个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内容，不需要解释，虽然我要求您的帮助！

Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!

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

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：

<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的白页容器现在是1200px宽，因此有足够的空间让这两个家伙并排。

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中使用了float：left，float：right，但是当它缩小以创建堆栈效果时，它们分别向右和向左移动，直到用户将页面缩小到480像素，当文本将居中时，仍然会稍微浮动。

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.

我在这里做了什么错误？ ：o

What have I done wrong here? :o

推荐答案

我会使用 display：inline-block 在父元素中添加 text-align：center 。

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.

这篇关于Div Left&右边还是顶部和底部居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！