Почему возможно отцентрировать текст или ссылки при использованных на нём float, применив к блоку родителю displey:table?

Question

[Дмитрий]

HTML

<div class="content">	
							<nav>

							<a href="#">all</a>
							<a href="#">print template</a>
							<a href="#">web template</a>
							<a href="#">user interface</a>
							<a href="#">mock-up</a>
						</nav>
</div>

CSS

.content nav{

display: table;
margin: 0 auto;


}
.content a{
	text-transform: uppercase;
	float: left;
	font-weight: bold;
	text-align: center;
	margin-right: 50px;
	text-decoration: none;
	color: black;
}

Пожалуйста объясните на пальцах почему table даёт такую возможность, я просто совсем в этом ещё зелёный, например почему displey: block, такое не выдает?

Comments

[AngReload]

Ваши ссылки не открываются.

Answer 1

[Vadim]

При display: table по-умолчанию ширина блока подстраивается под ширину контента.
В случае с display: block - по-умолчанию блок растягивается на всю ширину.
Поэтому в случае с display: table - margin: 0 auto работает и центрирует блок по горизонтали. если вопрос в этом, конечно :)
Если хотите использовать display: block, нужно явно указать width либо max-width:
https://jsfiddle.net/dx2poLwk/
Либо вообще посмотрите в сторону display: flex.