xeofan
@xeofan
Бомж на клаве

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

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, такое не выдает?
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
sankooo
@sankooo
Software Engineer
При display: table по-умолчанию ширина блока подстраивается под ширину контента.
В случае с display: block - по-умолчанию блок растягивается на всю ширину.
Поэтому в случае с display: table - margin: 0 auto работает и центрирует блок по горизонтали. если вопрос в этом, конечно :)
Если хотите использовать display: block, нужно явно указать width либо max-width:
https://jsfiddle.net/dx2poLwk/
Либо вообще посмотрите в сторону display: flex.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
//stablecode Вена
от 250 000 ₽
Фрамир Санкт-Петербург
от 80 000 ₽
ITooLabs Тула
от 35 000 до 40 000 ₽
05 мар. 2024, в 16:02
500 руб./за проект
05 мар. 2024, в 15:57
7000 руб./за проект
05 мар. 2024, в 15:55
30000 руб./за проект