Создание центральной горизонтальной навигации – Мастерство CSS – Оптимизация веб-производительности
Автор: Гарри Робертс на Мастерство CSS .
Содержание- Демо
- Обновление
Центрировать элементы уровня блока легко, просто задайте ширину и установите margin:0 auto; ,
но что, если вы не знаете эту фиксированную ширину? Вы можете использовать text-align:center; но это также не будет работать на блочных элементах шириной 100%… это только
работать с элементами текстового уровня.
По возможности всегда следует избегать явного определения ширины и высоты,
так как это сделает документ намного менее ориентированным на будущее, гибким и
расширяемый… Предположим, у вас есть четыре пункта в меню навигации — вы можете работать
уменьшите их ширину и используйте margin:0 auto; , чтобы отцентрировать их.
Добавление пятого
увеличит ширину, а это означает, что вам также нужно будет изменить CSS. это далеко
от идеала, и тем более с CMS для работы сайта (клиент может добавлять страницы,
но, возможно, не может редактировать CSS).
Однако есть способ сделать горизонтальную навигацию по центру, не зная явную ширину и не добавляя CSS. Это также удивительно легко.
Наценка:
<ул>
Довольно стандартный, неупорядоченный список пунктов меню. CSS находится там, где он есть. Я выделил биты, которые выполняют большую часть работы:
.nav{
граница: 1px сплошная #ccc;
ширина границы: 1px 0;
стиль списка: нет;
маржа: 0;
заполнение: 0;
выравнивание текста: по центру;
}
.nav ли {
дисплей: встроенный;
}
.
nav {
дисплей: встроенный блок;
отступ: 10 пикселей;
} 
nav {
дисплей: встроенный блок;
отступ: 10 пикселей;
} Здесь я просто создал список навигации и присвоил ему верхнюю границу.
и нижний (исключительно для выделения текста по центру). Вместо того, чтобы плавать block-level display:inline; , то есть
они больше не занимают 100% доступной ширины, и теперь они хорошо складываются
друг против друга.
Затем мы используем (намного недоиспользованный) display:inline-block; , чтобы убедиться, что ссылки
сами не разбиваются на новые строки, но по-прежнему подчиняются любым значениям заполнения
соответственно. Здесь я увеличил область попадания, добавив padding:10px;
Вы могли бы, если хотите, применить встроенный блок к дисплей: встроенный блок; не будет работать с блочными элементами.
Вот небольшая демонстрация. Попробуйте использовать Firebug или аналогичный для добавления другие элементы списка на лету и наблюдайте, как они органично центрируются в списке. я протестировали это в IE7-8 и обнаружили, что он отлично работает. Я не проверял IE6, но Я думаю, все будет хорошо.
Обновление
Вы спросили, и я услышал; Я сделал выпадающую версию с помощью CSS.
для тебя. Строка верх: 100%; заставит раскрывающийся список работать в IE7, но вроде
немного портит опыт во всех других браузерах. Оставите ли вы его или
не зависит от вас. Опять же, просмотр исходного кода с практическими рекомендациями…
☕️ Помогло? Купи мне кофе!
AtoZ Совет по CSS: Плавающие, четкие и центрирующие элементы
HTML и CSS
- CSS
Загрузка плеера…
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду исследовать различные значения (и свойства) CSS, каждое из которых начинается с отдельной буквы алфавита.
В этой статье я добавил новый краткий совет/урок о свойствах Float и Clear и о том, как центрировать элементы различными способами.
F для Float and Clear
Float отлично подходит, если вы хотите переместить элемент влево или вправо на странице, но, к сожалению, вы не можете сделать float: center для центрирования элемента. Какая боль правда?
Ну, не бойтесь, вот краткий обзор центрирования всех видов элементов.
Совет 1
Если элемент является блочным, вы можете комбинировать width и margin: auto .
margin: auto автоматически рассчитает поля слева и справа, чтобы они оба были равны, центрируя блок внутри содержащего его элемента.
См. Pen tip-margin-auto от SitePoint (@SitePoint) на CodePen.
Совет 2
Если элемент является встроенным (или встроенным в блок), используйте text-align: center в родительском контейнере.
См. Pen tip-flexbox от SitePoint (@SitePoint) на CodePen.
Подсказка 3
Если элемент абсолютно позиционирован, объедините влево и преобразуйте для центрирования элемента по горизонтали.
См. Pen tip-flexbox от SitePoint (@SitePoint) на CodePen.
Аналогичную технику можно использовать для вертикального центрирования элементов, но об этом в следующем совете!
Совет 4
Используйте flexbox (еще одно свойство ‘F’, ура!)
Чтобы использовать flexbox для центрирования одного элемента (или группы элементов), вам нужно установить два свойства для содержащего элемента: display: flex и justify-content: center .