центр 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, но это, кажется, не применяется для DIVs с стилем «рядного блока».

Замечание 'inline-block' не является обязательным требованием, которое у меня есть, я просто ищу меню для плавания влево и содержимое, которое должно быть расположено непосредственно в стороне от него (с контентом, ориентированным относительно 'parent')

Я пытаюсь сосредоточить «контент» относительно «родителя» (то есть, в центре «контент», как будто «меню» не было).

Answer 1

У вас были некоторые проблемы с тегами: дополнительный section тег, div тег.

Чтобы решить проблему я удалил float: left из .menu и добавил:

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

Это всегда будет позиционировать меню на левой и основной контент будет сосредоточен, как будто меню нет.

Fiddle: https://jsfiddle.net/ahqamm7o/2/

Answer 2

Если вы указали ограниченную ширину, то float:left не нужен, применять text-align:center к .content классу так будет совместите центр контента с в этом конкретном DIV, если мы будем использовать position:absolute родителем должен быть в position:relative.