html - 居中 DIV 相对于菜单 DIV 旁边的父 DIV

Question

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 的技术但这似乎不适用于具有“内联 block ”样式的 DIV。

注意“inline-block”不是我的要求，我只是在寻找向左浮动的菜单以及要直接放置在它旁边的内容(内容相对于“parent”居中)

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

Answer 1

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