css - 当 div 内的内容移到一侧时，将内容居中放置在页面中间

Question

我有一个网页，一侧固定有 200 像素的列(包含菜单)。右侧是可变宽度。右侧将使用 AJAX 填充。对于默认页面(未选择任何菜单项时)，我试图让公司 Logo 在页面 中水平居中，而不是在放置它的 div 中。到目前为止，我尝试过的 CSS 都没有按预期工作，随着浏览器窗口水平调整大小， Logo 会向左或向右移动。由于担心我剩余的头发会脱落，我正在寻找建议。

附加信息

两列的 CSS(来自 Dreamweaver)是

.sidebar1 {
float: left;
width: 200px;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
float: left;
}

sidebar1 列包含菜单。右(主)列就是 <div class="content"></div>并将根据从菜单中选择的内容从服务器接收内容。这个 div 当然位于页面中心的右侧，但我想将 Logo 放在 div 中，但在页面中水平居中。

Answer 1

如果您需要在 80% 的内容中放置 Logo ，您可以将其绝对定位。这将允许 Logo 由正文而不是 .content 定位(因为 .content 是 position:static)。

试用 this jsbin

.content .logo { position: absolute; left: 48%; top: 10px; }