Центрировать блок по центру, не задавая ширины?

Question

[Dymok]

Как можно центрировать блок .top-menu по центру родительского блока без задания ширины или так, чтобы ширина была равна содержимому? Почему без указания ширины он занимает всю ширину родителя?
https://codepen.io/UnluckySerivelha/pen/ZvYpeP

Answer 1

[Конан Варвар]

.nav-inner {
   text-align: center;
}

.top-menu {
   display: inline-block;
}

Comments

[Dymok]

Спасибо!

[Конан Варвар]

UnluckySerivelha, Обращайтесь :)

Answer 2

[Роман]

Почему без указания ширины он занимает всю ширину родителя?

Потому что div - блочный элемент.

.top-menu {
    margin: 0 auto;
    text-align: center;
}

Answer 3

[Александр Князев]

Очень классно с этим справляется display:flex