中心 DIV 相对于菜单 DIV 旁边的父 DIV答案

【问题标题】：Center DIV Relative to Parent DIV next to menu DIV中心 DIV 相对于菜单 DIV 旁边的父 DIV
【发布时间】：2016-05-05 01:44:36
【问题描述】：

https://jsfiddle.net/ahqamm7o/1/

#parent {
text-align: center;
}

.content {
display: inline-block;
text-align: left;
margin: auto;
width: 50%;
}

.menu {
float: left;
text-align: left;
width: 20%
}

我尝试使用来自 CSS: center element within a <div> element 的技术，但这似乎不适用于具有“内联块”样式的 DIV。

注意“inline-block”不是我的要求，我只是在寻找向左浮动的菜单和直接定位到它侧面的内容（内容相对于“父”居中）

我正在尝试将“内容”相对于“父级”居中（也就是说，将“内容”居中，就好像“菜单”不存在一样）。

【问题讨论】：

标签： html css

【解决方案1】：

如果您指定了有限的宽度，则不需要 float:left，请将 text-align:center 应用于 .content 类，以便它将内容中心与该特定 div 对齐，如果我们使用 position:absolute，则父级应该是在position:relative。

【讨论】：

啊！好的。将position:relative 添加到父级使我可以将顶部保持在0px，并且样式看起来更好，更稳定。

【解决方案2】：

您遇到了一些标签问题：一个额外的 section 标签、div 标签。

为了解决您的问题，我从.menu 中删除了float: left 并添加了：

position: absolute;
top: 0px;
left: 0px;

这将始终将菜单定位在左侧，并且主要内容将居中，就好像菜单不存在一样。

小提琴：https://jsfiddle.net/ahqamm7o/2/

【讨论】：

这解决了问题，谢谢。虽然，我一直在寻找除 position:absolute 之外的其他东西，因为一旦您尝试将其定位得更远（例如向下 200 像素或向下 20%），您会遇到一些跨浏览器问题
这不是一个好的解决方案，因为它要求父级处于绝对位置。
感谢您的建设性反馈。