Div Left & Right 但也是顶部和底部居中？答案

【问题标题】：Div Left & Right but also top and bottom centred?Div Left & Right 但也是顶部和底部居中？
【发布时间】：2014-03-20 04:31:42
【问题描述】：

所以我试图创造这种效果，当窗口被拉得足够大时，两个 div 并排对齐，但当缩小时，div 堆叠在一起并整齐地居中。

到目前为止，我有这样的看法。

用于包裹图像的 DIV 的 CSS 是：

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

标题为“Pararight”，因为当屏幕这么宽时，div 应该与右侧的图像并排放置。

包裹文本的 DIV 的 CSS 是：

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

命名为“paraleft”，因为文本将向左对齐。

提一下也很重要。我认为，这 2 个 DIV 被包装在另一个 DIV 中，即：

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

主要是因为页面下方会有多个这样的hitterbox div，并且复制粘贴和更改HTML内容更容易，虽然我在寻求你的帮助，但不需要解释！ em>

最后一条信息是，持有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>

我把 pararight 放在 paraleft 上面，这样它就可以上下对齐，就像你看到的那样。下面提到的所有 DIV 的白页容器目前都是 1200 像素宽，因此有足够的空间让这两个人并排坐着。

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

我在这里做错了什么？ :o

【问题讨论】：

标签： css html alignment

【解决方案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。

【讨论】：

没问题，这就是 SO 的用途。