将 div 内的内容放在页面中间时位于一侧答案

【问题标题】：Center content in middle of page when inside a div over to one side将 div 内的内容放在页面中间时位于一侧
【发布时间】：2011-07-01 16:53:42
【问题描述】：

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

其他信息

两列的 CSS（来自 Dreamweaver）是

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

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

【问题讨论】：

如果徽标在#content div 中，如果没有某种排序或javascript，您将无法做到这一点。
@Crashdown，这就是我最初拥有它的地方，但它把它放在菜单上方，而我真的希望它在菜单旁边。实际上，它只不过是空白区域的美容填充物。

标签： css html centering

【解决方案1】：

如果您需要在 80% 的内容中包含徽标，您可以绝对定位它。这将允许标志由正文定位，而不是.content（因为.content 是position:static）。

试试this jsbin

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

【讨论】：

谢谢。它只需要稍作调整，但其他工作正常。标志是 250px 宽，所以以下对我有用： .content .logo { position: absolute;左：50%；左边距：-125px；顶部：10 像素；}
@John Gardeniers - 欢迎！很高兴它对你有用。我认为负边距将是一个很好的附加设置宽度徽标。