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中的技术，但这似乎不适用于具有＆＃39;内联块＆＃39;的DIV。风格。

注意＆＃39;内联块＆＃39;我不是一个要求，我只是只是寻找向左浮动的菜单，并将内容直接放在它的一边（内容相对于＆＃39; parent＆＃39;）

我正在努力将内容＆＃39;相对于父母＆＃39; （即，中心＆＃39;内容＆＃39;好像＆＃39;菜单＆＃39;不存在）。

Answer 1

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

Answer 2

您遇到了一些标记问题：额外的section代码，div代码。

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

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

这将始终将菜单放在左侧，主要内容将居中，就像菜单不在那里一样。

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

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

2 个答案: