Как сделать меню по центру css

Адаптивное меню на CSS flexbox

Адаптивное меню на CSS flexbox

Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97.8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.

Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно "не париться" по поводу медиа запросов.

На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.

Адаптивное меню на CSS flexbox.

Шапка состоит из трех логичных блоков:

  1. Блок с логотипом
  2. Блок с меню, сделанное на списках
  3. Блок с иконкой и номером телефона

Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.

Адаптивное меню на CSS flexbox.

Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.

Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.

Так будет выглядеть шапка без применения стилей, так и должно быть.

Адаптивное меню на CSS flexbox.

А сейчас внимание! Достаточно указать двум блокам display: flex; и всё содержимое шапки вытянется в строчку.

.header .menu ul <
display: flex;
>

Вот так работает flexbox.

Адаптивное меню на CSS flexbox.

Добавим стили и шапка готова. Дальше нам нужно будет её адаптировать под разные размеры экранов. Обратите внимание, как мало написано кода.

body <
background-color: #fff;
font-family: "Open Sans", sans serif;
line-height: 1.5;
>

.header <
border: 2px solid #ccc;
display: flex;
flex-wrap: wrap; /*перенос строки */
justify-content: space-between; /*прижимает содержимое к краям */
align-items: center; /*выравнивает элементы по центру на вертикальной */
>

.header .logo <
padding-left: 30px;
>

.header .menu ul <
display: flex;
list-style: none;
>

.header .menu ul li <
margin: 20px 10px;
>

.header .menu ul a <
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #06a327;
>

.phone <
font-size: 110%;
color: #333;
padding-right: 40px;
>

Работаем над адаптивностью шапки

Суть процесса по адаптивности сайта заключается в поиске контрольных точек, при которых элементы сайта будут не видны или выглядеть небрежно. Наша задача при сжатии браузера по ширине, увидеть проблему и исправить, дописав соответствующий код (медиа запрос) в файл стилей.

Например, на ширине экрана 900 пикселей, блок с телефон прижался к левому краю шапки.

Адаптивное меню на CSS flexbox.

Решение проблемы, вы видите ниже. Выравниваем блок .phone по центру.

@media screen and (max-width: 900px) <
.phone <
margin: auto;
>
>

На ширине экрана 500 пикселей начинает срезаться меню, так как не помещается в строчку.

Адаптивное меню на CSS flexbox.

Легким движением руки для ul, прописываем свойство flex-direction: column; которое возвращает списки в естественное блочное состояние.

@media screen and (max-width: 500px) <
.header <
flex-direction: column;
>
.header .menu ul <
flex-direction: column;
align-self: center;
>
.header .menu ul li <
margin: 5px;
>
>

Адаптивное меню на CSS flexbox.

Разобраться с адаптивной версткой на flexbox-ах, Вам поможет этот видеокурс "Вёрстка сайта с нуля"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 2 ):

Доброго времени суток Михаил! От себя хочу предложить маленькую поправочку в стили, а именно: в коде CSS с указанием размеров отступов margin: 0; padding: 0; Указывать не просто ноль (0), а дописывать 0px, так как просто ноль не срабатывает.

уверяю Вас, что работают оба варианта.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Меню css по центру: Как выровнять горизонтальное меню по центру?

Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством &#8216;text-align&#8217;:

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению &#8216;center&#8217; свойства CSS &#8216;text-align&#8217;.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на &#8216;auto&#8217;. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

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

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы

Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство &#8216;transform&#8217;, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

  1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
  2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
  3. Поместите элемент посередине контейнера с помощью &#8216;top: 50%&#8217;. (Заметьте, что &#8216;50%&#8217; здесь означают 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( &#8216;50%&#8217; в &#8216;translate(0, -50%)&#8217; указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове &#8216;flex&#8217; для свойства &#8216;display&#8217;. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила &#8216;left: 50%&#8217; и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании &#8216;translate&#8217;:

Следующий пример объясняет, зачем требуется правило &#8216;margin-right: -50%&#8217;.

Когда форматер CSS поддерживает &#8216;flex&#8217;, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является &#8216;justify-content: center&#8217;. Точно также, как &#8216;align-items&#8217; определяет вертикальное выравнивание содержимого контейнера, &#8216;justify-content&#8217; таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства &#8216;flex&#8217; состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило &#8216;margin-right: -50%&#8217; необходимо для компенсации &#8216;left: 50%&#8217;. Правило &#8216;left&#8217; уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило &#8216;margin-right: -50%&#8217; и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства &#8216;translate&#8217; для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Как сделать фиксированное меню

Узнайте, как создать &#171;фиксированное&#187; меню с помощью CSS.

Как создать фиксированное верхнее меню

Шаг 1) добавить HTML:
Пример

<div>
<p>Some text some text some text some text..</p>
</div>

Шаг 2) добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0

Пример

/* Links inside the navbar */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Change background on mouse-over */
.navbar a:hover <
background: #ddd;
color: black;
>

/* Main content */
.main <
margin-top: 30px; /* Add a top margin to avoid content overlay */
>

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :

Пример

/* Main content */
.main <
margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
>

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

text-align | htmlbook.ru

CSS Internet Explorer Chrome Opera Safari Firefox Android iOS
2.1 6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
3 2.0+ 11.6+ 3.1+ 3.6+ 2.1+ 2.0+
Краткая информация
Версии CSS
Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис
CSS2.1
CSS3
Значения

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель
Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Красивое выравнивание блоков по резиновой сетке — CSS-LIVE

Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.

При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float , и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?

Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!

Проблема

Для начала предлагаю обсудить этот вопрос подробнее. Посмотреть примеры того, что именно за неприятность происходит с последней строкой в сетке, а так же определиться, какого результата мы ждём.

Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center . А так же воспользуемся маркированным списком.

Ничего необычного в коде нет. Обычный список, всё те же старые добрые элементы строчно-блочного ( display : inline-block ) уровня. Самое пожалуй интересное, что стоит выделить, это text-align: center , благодаря которому и происходит наше горизонтальное выравнивание.
Пока пункты занимают единственную строку, всё выглядит так.

Но, как только на поле появляется последняя строка, кол-во блоков в которой меньше, чем в предыдущих строках, то получается следующее.

Вроде бы тоже неплохо, всё происходит так, как и должно происходить. Последняя строка так же, как и предыдущие — выравнивается по середине. Но, именно это выравнивание и создаёт нам проблему. Блоки находятся по середине, создавая по бокам много ненужного и пустого пространства. Если бы, например, в последней строке остался всего один блок, то этого бы пространства стало ещё больше, а сам блок болтался бы в середине, как изгой на пустыре.

А теперь, давайте взглянем, чтобы мы хотели получить.

Как видно из рисунка, два элемента в последней строке прижались к левому краю, не смотря на то, что строка по ширине явно больше, чем общая ширина её блоков. Это видно по правому, свободному пространству, которое составляет две трети наших элементов. Именно такое поведение блоков нам и нужно получить в итоге. Т.е. по сути сделать так, чтобы выравнивание элементов было красивым, строящимся ровно по сетке (даже по резиновой), не взирая на своё количество и лишнее пустое пространство в последней строке. Говоря другими словами, нам нужно каким либо образом повлиять на поведение последней строки, заставив её подчиняться нашим правилам.

Как это работает?

Перед тем, как перейти непосредственно к решению задачи, давайте для начала разберём алготитм работы таких свойств, как text-align: center и justify . Это поможет нам лучше понять, что происходит в нашей сетке, её поведение, и то, как выполняется работа этих свойств в последней строке.

text-align: center

Начнём пожалуй с text-align: center . В нем можно выделить три основных этапа.

Первый этап
В начале берётся строка. Высчитывается общая ширина слов или неразрывных блоков (inline-block, img, и т.д) в строке. Причём если между этими блоками есть фактические пробелы или же отступы, которые сделаны с помощью таких средств, как word-spacing и прочих, то эти расстояния так же добавляются к общей сумме ширины блоков.

Второй этап
На этом этапе всё ещё проще. Вычисляется оставшееся ширина строки, т.е. всё свободное пространство, которое не вошло в сумму общей ширины слов с их межсловным расстоянием.

Третий этап
Ну и в завершающем этапе происходит следующее. Самая первая в строке площадка с буквой сдвигается вправо ровно на половину результата, полученного после этапа номер два. Что даёт абсолютно равные отступы справа и слева самой строки.
Чтобы лучше понять, как всё происходит, я сделал специальный рисунок.

Перед нами рисунок, на котором изображён контейнер, с двумя строками, ширина которых составляет 500px.
Так же мы можем видеть, что сумма всех блоков в первой строке с их интервалами равна 370px. Значит на третьем этапе наш алгоритм вычел из первого второе (500-370), что дало результат 130. Далее, как я уже говорил, поделил эту сумму ровно на два раза (130/2) и отодвинул самый первый блок вправо, на полученный результат (65px). Таким образом наши блоки оказались точно по середине, с отступы по бокам стали абсолютно одинаковыми. Если бы в первой строке не хватило места, то самый крайний справа блок перешёл бы на второю строку и алгоритм снова включился бы в дело.

Тоже самое касается и второй строки. В ней алгоритм работает точно так же, мало того, можно увидеть, что боковые отступы в ней составляют дробное число (132.5px), так как text-align: center делит общую ширину блоков с их интервалами ровно на 2, как я и говорил.

В принципе ничего сложного, всё вполне понятно и логично. В нашей ситуации важно понять, что, если в последней строке остаётся один блок, то он выравнивается ровно по середине, за счёт высчитанного, свободного пространства справа. А это как раз то, что нам и нельзя допускать.

text-align: justify

Механизм text-align: justify , я уже описывал в одной из своих статей. Повторяться не имеет смысла, поэтому я вам, настоятельно рекомендую пройти по ссылке и внимательно перечитать там всё, что касается алгоритма и этапов работы text-align: justify .
Единственное, что я хочу упомянуть здесь, это то, что…

Последняя же строка не попадает в поле зрения justify, так как он работает только для целиком заполненных строк, а в последней строке пробелы всегда остаются своего обычного размера.

Да, именно так. text-align: justify в отличии от text-align: center вообще отказывается работать с последней строкой, и поэтому выравнивания по ширине в ней не происходит.
Так что это тоже входит в наши обязанности, а именно заставить неработающий алгоритм действовать, и в завершающей строчке.

Решение

Сразу забегу вперёд и скажу, что решение для обоих случаев абсолютно идентично, поэтому нет смысла разбирать каждое из них в отдельности. Так что давайте поразмыслим, что у нас есть на данный момент.
Значит, по сути, у нас есть два свойства text-align: justify и center , каждый из которых выравнивает строки по собственному алгоритму. А так же мы уже понимаем, что text-align: center работает с последней строкой, а вот text-align: justify — нет. Но зато мы точно знаем, что если строка, за которой идёт следующая (допустим последняя) будет полностью заполнена, то эти свойства будут выравнивать нашу сетку по нашим правилам. И даже при резиновой ширине контейнера такие заполненные строки будут вести себя так, как нам хотелось бы.

Какой же вывод можно из этого сделать? И как можно связать эти вещи с последней строкой, в которой может быть всего один блок? Ответ прост. Нам нужно придумать, как можно заполнить последнюю строку так, чтобы, оставшееся от общей ширины блоков пространство, было чем-то заполнено, и мало того, чтобы это &#171;чем-то&#187; могло переходить на следующую строку, для того, чтобы наши свойства работали безукоризненно.

Итак, для заполнения последней строки, мы будем использовать псевдоэлемент, сгенерированный при помощи :after . Это хороший вариант, так как он поможет решить нам нашу задачу и избавит от лишнего мусора в разметке. По умолчанию псевдоэлементы генерируют строчный блок, а значит именно то, что нам и нужно. Так как inline-block будет представлять из себя одну большую, неразрывную букву и не сможет разбиться на несколько &#171;кирпичей&#187;, что не приведёт ни к чему путному. Ну, а block сразу же займёт отдельную строку, и так же, как и inline-block — не принесёт результатов. При этих значениях наша ситуация будет выглядеть примерно так.

Как видно, из скриншота, вспомогательный блок сразу же занял новую строку, оставив прежнюю (последнюю по факту) подчиняться правилам алгоритма. Каких-то положительных результатов такими средствами добиться невозможно, как бы вы не пытались, так что отбрасываем эти вещи и переходим к настоящему решению…

Из всего вышесказанного можно понять одно, что в нашей ситуации нам может помочь элемент, именно строчного (inline) уровня, т.е. обычный display : inline + строка текста, с пробелами между слов.

Да, очень похоже. Из скриншота ясно, строчный блок, мало того, что смог повлиять на последнюю строку, так ещё и перенёсся на следующую не полностью, оставив на предыдущей строчке неразрывное слово. По этому слову видно, что по своей ширине оно немного не дотягивает до ширины блоков (100px), а если бы дотягивало, то, возможно, у нас и вышло бы что-то путное.

В общем поэкспериментировав какое-то время с вышесказаннным, на свет родилось следующее решение.

Здорово! Наша сетка выровнена так, как нам надо. Сразу же скажу, что такое выравнивание получается при любой ширине экрана, что не может не радовать. А теперь сама суть.

Значит у нас есть строка &#171;i i i i i i i i&#187; , состоящая из букв и пробелов, но это не простые буковки и пробелы, как может показаться на первый взгляд. Во-первых сама буква i выбрана не случайно. Дело в том, что буква i сама по себе узкая, за счёт чего ей легко управлять и подгонять нужную ширину. Во-вторых сами пробелы состоят не только из символа пробела, но и из word-spacing , т.е. его значение плюсуется к пробелу, что в сумме даёт нужную нам ширину. Да, и конечно же, нужно учитывать, что связка &#171;пробел + word-spacing &#187; работает только тогда, когда в конце неё идёт другой символ, отличный от пробельного. Так как пробелы имеют свойство &#171;схлопывания&#187;, то буквы i, идущие после word-spacing не дают им этого сделать.

Так что, по сути, мы имеем неразрывные псевдоблоки, в виде &#171;буквы + padding-left &#187; вначале псевдоэлемента, а далее в виде связки &#171;пробел + word-spacing + буква&#187;, и так до конца строки. Ну, а на следующей строчке всё повторяется заново, только первый псевдоблок состоит теперь из одной буквы. Но эта строка нас уже не волнует, нас интересуют только те &#171;добавочные блоки&#187;, которые дополняют последнюю строку с нормальными блоками в сетке.
Кстати, букв должно хватить, чтобы гарантировано заполнить последнюю строку до конца в худшем случае. Т.е. их число должно быть равно максимальному кол-ву блоков в строке.
Да, и, конечно же, с text-align: justify этот метод работает точно так же.

Но это были плюсы, а как же минусы? Минусы у этого варианта таковы:
Во-первых, в нестабильной работе в Opera, блоки в которой, временами имеют нечёткое выравнивание по сетке. Причём это касается только последней и предпоследней строк. Не понятно, из-за чего это происходит, к сожалению мне так и не удалось это выяснить. Возможно проблема кроется в том, что крайняя буква прилипает к блоку, не чувствуя между ними пробела. В любом случае, очень надеюсь на то, что в комментах кто нибудь сможет дать пояснение этой загвоздки. Но, в целом, это не выглядит безобразно, т.е. работает, но просто немного нестабильно.

Во-вторых, из-за создания дополнительных элементов снизу образовывается неприятный отступ, который происходит за счёт его размера шрифта и межстрочного интервала. Лекарство в виде обнуления шрифта + межстрочного интервала у родителя и восстановлением их в нормальное состояние у потомков — не приносит результата, так как нужная нам строка в псевдоэлементе становится невидимая, и наша сетка перестаёт её чувствовать и поддаваться дрессировке.
Но есть всё же &#171;почти&#187; выход из ситуации, это нижний отрицательный margin , который может подтянуть часть своего &#171;хвоста&#187;, позволяя следующим за ним элементам налезать на него. Подробнее об этом можно почитать тут. Я сказал &#171;почти&#187;, потому что этот способ выручает отчасти, я бы сказал, на половину, может чуть больше. Так как в момент создания, уже двух-строчного хвоста, из букв, подтянуть обе строки, уже не представляется возможности.

Во-третьих, чтобы заставить этот метод работать в IE6-7, нам потребуется заменить наш псевдоэлемент дополнительным блоком-помощником, который будет вставлен в конце списка. Плюс к этому придётся воспользоваться такими средствами, как text-justify , text-align-last (их поведение я уже описывал в этой статье), восстановлением свойства zoom в начальное состояние, у дополнительного блока и прочими &#171;радостями&#187;, благодаря которым, в этих браузерах наш способ будет работать так же. В конце статьи я обязательно приведу разные варианты этой задачи, чтобы вы могли выбрать нужный.

Резюме

В этой статье мы доказали, что блочная сетка не такая уж и неподвластная. Как оказалось, это вполне управляемая конструкция. Мало того, красивое выравнивание блоков в сетке можно достичь совершенно обычным и не трудным способом, а результат позволяет нам легко использовать его плоды в любых проектах. Что я и делаю, когда предоставляется такая возможность.

Да, и конечно же, хочется выразить огромную благодарность Илье Стрельцыну (@SelenIT2) за его идеи и невероятную помощь в материалах. Без него бы этой статьи не было.

Все решения воедино

Обновление от 30.03.2017: Современное решение этой задачи на Grid Layout (без хаков и лишнего кода)

P.S. Это тоже может быть интересно:

Способы вертикального выравнивания по центру в CSS.

Способы вертикального выравнивания по центру в CSS.

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также &#171;за&#187; и &#171;против&#187; каждого из них. Пример.

1-ый способ

Этот метод предполагает, что мы устанавливаем некоторому элементу <div> способ отображения как таблица, после этого мы можем использовать в нём свойство vertical-align (которое работает по разному в различных элементах).

Плюсы
  • Контент может динамически изменять высоту (высота не определена в CSS). &#13;
  • Контент не обрезается в случае, если для него недостаточно места. &#13;
Минусы
  • Не работает в IE 7 и меньше &#13;
  • Много вложенных тэгов &#13;

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Плюсы
  • Работает во всех броузерах. &#13;
  • Нет лишней вложенности. &#13;
Минусы
  • Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся. &#13;

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

Плюсы
  • Работает во всех броузерах. &#13;
  • Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары. &#13;
Минусы
  • Думаю только один: что используется лишний пустой элемент. &#13;

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Плюсы
Минусы
  • Не работает в Internet Explorer &#13;
  • Контент будет обрезаться без скролл-баров, если не хватает места в контейнере. &#13;

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Плюсы
  • Работает во всех броузерах. &#13;
  • Не обрезает текст, если он не влез. &#13;
Минусы
  • Работает только с текстом (не работает с блочными элементами). &#13;
  • Если текста больше чем одна строка, то выглядит очень плохо. &#13;

Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

  • #floater (чтобы выровнять контент по центру) &#13;
  • #centred (центральный элемент)&#13;
  • #side&#13;
  • #logo &#13;
  • #nav (список <ul> ) &#13;

Напишем следующую html-разметку:

Шаг 2

Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

Нижний отступ для элемента &#171;floater&#187;-а равен минус половине высоты контента (400px), а именно -200px;

Сейчас ваша страничка должна выглядеть приблизительно так:

Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

Шаг 3

И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.

Другая интересная вещь, которую мы использовали для меню &#8212; это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

Шаг 4

Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.

В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

Совместимость

Как вы уже наверное предположили, основной источник проблем совместимости &#8212; Internet Explorer:

  • Элементу #floater обязательно надо установить ширину &#13;
  • В IE 6 лишние отступы вокруг меню &#13;

HTML/CSS. Как создать вертикальное и горизонтальное меню

Эта инструкция продемонстрирует, как создать вертикальное и горизонтальное меню используя стили CSS. Перед началом убедитесь, что вы знакомы с HTML тэгами ненумерованного списка. Кроме того, посмотрите инструкцию как создать меню в HTML.

Для начала создадим HTML меню на основе ненумерованного списка:

Теперь необходимо создать CSS файл и подключить его к странице:

Убедитесь, что код подключающий CSS находится в разделе <head> вашего документа.

Вы можете использовать и inline стили.

В результате у вас должен получиться следующий код:

Несортированный список обладает собственными стилями и таким образом без любых дополнительных изменений мы получаем вертикальное меню.

Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.

В первую очередь добавьте класс в список. Замените <ul> на <ul>

Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:

Теперь сделаем список горизонтальным:

Мы добавили значения padding по горизонтали для того, что бы элементы не слиплись. Теперь меню готово и осталось только добавить в него ссылки, фон и отредактировать цвет шрифта.

Выравнивание блоков по центру в CSS

Выравнивание содержимого по горизонтали, которое имеет свойство float, можно сделать очень легко и кроме того полностью кроссбраузерно (работает в Opera 8+, Firefox 3+, IE 5.5+).

Пример выравнивания div-блока

Чтобы выравнять блок со свойством float или несколько расположенных в ряд блоков, необходим еще один внешний блок. Внешнему блоку и внутренним блокам назначается position: absolute; и float: left; , внешнему назначить left: 50%; , а внутренним блокам right: 50%; . Для использования float: right; нужно назначить внешнему назначить right: 50%; , а внутренним блокам left: 50%; . Рекомендую очищать float, размещая после выравненных по центру элементов блок со свойством clear: both; .

Таким образом можно добиться такого центрирования:

Границу зеленого цвета имеет внутренний блок с прерывистую красную границу имеет внешний блок с >

HTML-код примера изображенного ниже выглядит так:

CSS-код примера изображенного ниже выглядит так:

Пример выравнивания пунктов меню

Практически данный выше пример можно применить при горизонтальном выравнивании меню сайта. Однако, при этом нужно принять во внимание то, что при достаточно большом количестве пунктов (занимающих по ширине больше половины страницы) появляется горизонтальная прокрутка. Чтобы от нее избавиться нужно во внешнем блоке применить свойство overflow . Если меню выпадающее, то его выпадающие пункты могут срезаться этим внешним блоком. Чтобы избежать этой проблемы, необходимо применять свойство overflow к блоку как можно более объемлющему, например, самому внешнему блоку, обрамляющего все содержимое страницы.

Например можно выравнять меню так:

Границу зеленого цвета имеют пункты li списка ul , прерывистую красную границу имеет список ul .

HTML-код примера изображенного ниже выглядит так:

CSS-код примера изображенного ниже выглядит так:

Так что все довольно просто. Желаю успехов в освоении новых методов.

html &#8212; Как выровнять панель навигации по центру с помощью css

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил 6 лет, 5 мес. Назад

Просмотрено 42к раз

Мне нужна помощь, чтобы выровнять панель навигации по центру Вот мой код. Что с ним не так? Это не выравнивает меню по центру.

206k5050 золотых знаков347347 серебряных знаков277277 бронзовых знаков

Джас Джашимджас Джашим

14611 золотой знак11 серебряный знак88 бронзовых знаков

Один из способов &#8212; установить display из #nav ul на inline-block .Затем добавьте text-align: center к родительскому элементу, чтобы центрировать дочерний ul :

Пример

В качестве альтернативы вы также можете установить отображение родительского элемента, с #nav на flex , а затем добавить justify-content: center для центрирования дочернего элемента по горизонтали.

Пример

Джош КрозьеJosh Crozier

206k5050 золотых знаков347347 серебряных знаков277277 бронзовых знаков

Здесь нет ничего страшного.

Просто добавьте text-align: center к ul и сделайте li display: inline-block

38211 серебряный знак1111 бронзовых знаков

Используйте этот CSS, и вы получите решение.Добавьте относительное положение Li, если вам требуется выпадающий список для некоторых категорий

Вы можете настроить отображение ul: inline-block; и установите text-align: center; в родительскую навигацию:

1,9198 серебряных знаков1313 бронзовых знаков

14.7k44 золотых знака3535 серебряных знаков6262 бронзовых знака

54111 золотой знак1010 серебряных знаков2222 бронзовых знака

переполнение: скрыто; дисплей: встроенный блок; >

11688 бронзовых знаков

Я сделал это так, как это работает, но вы также должны дать класс и организовать мобильный и настольный компьютер.Также я использовал для начальной загрузки.

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css nav или задайте свой вопрос.

Stack Overflow лучше всего работает с включенным JavaScript

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

Как центрировать меню навигации Учебное пособие

главная »код» css »css центр nav

Как всегда, есть много способов снять шкуру с кошки.Ниже я выполнил / создал шесть лучших / самых простых способов центрировать ваше меню навигации (также известные как nav, navbar, menu). Все демонстрации выполнены в небольшом стиле, однако весь код, показанный ниже, урезан до самого необходимого (то есть достаточно, чтобы сделать его центром). * Предполагается, что применяется ко всему приведенному ниже коду.

Метод № 1 в основном использует маржу : auto; для центрирования навигатора. Если ваши пункты меню (li / a) имеют фиксированную ширину , то этот метод, вероятно, самый простой способ центрировать вашу навигацию.Основные фрагменты кода, используемые для центрирования навигационной панели, выделены жирным шрифтом.

Метод 2 в основном использует position: absolute; для центрирования навигатора.На самом деле я никогда не центрировал меню таким образом, но, если ваши пункты меню (li / a) имеют фиксированную ширину , то это довольно простой способ центрировать вашу навигацию. Основные фрагменты кода, используемые для центрирования навигационной панели, выделены жирным шрифтом.

Метод № 3 в основном использует text-align: center; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину , и вам НЕ нужна среда блока отображения для li / a, то это самый простой способ центрировать навигацию. Основные фрагменты кода, используемые для центрирования навигационной панели, выделены жирным шрифтом.

Метод № 4 в основном использует display: inline-block; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину и вам НЕОБХОДИМО окружение блока отображения для li / a, то это, вероятно, будет для вас самым простым способом центрировать навигацию. IE6 / 7 &#8212; единственные, кому нужна небольшая помощь (как показано ниже).

Метод № 5 в основном использует position: relative; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину , и вам НЕОБХОДИМО окружение блока отображения для li / a, и / или вы хотите центрировать «плавающий элемент без ширины», то это еще один простой способ центрируйте свой навигатор. Опять же, IE6 / 7 &#8212; единственные, кому нужна небольшая помощь (как показано ниже).

Метод № 6 в основном использует display: table; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину и вам НЕОБХОДИМО окружение блока отображения для li / a, то это еще один и последний способ центрировать вашу навигацию. И все же, опять же, IE6 / 7 &#8212; единственные, кому нужна небольшая помощь (как показано ниже).

Красивые горизонтально центрированные меню

Мэтью Джеймс Тейлор ›Веб-дизайн› Макеты ›Центрированные меню

Многим людям нужны центрированные меню на своих веб-сайтах, но новичку в CSS эта задача кажется невыполнимой.

Если вы выполните поиск в Интернете, вы найдете несколько методов центрирования, но большинство из них основаны на хаках CSS, JavaScript или нестандартных правилах CSS, которые поддерживаются не всеми браузерами.

В этом посте я собираюсь показать вам мой секретный метод создания центрированных вкладок, который не использует никаких CSS-хаков и будет работать во всех распространенных веб-браузерах вплоть до IE 5.5!

Он также совместим с моими идеальными жидкими раскладками.

Начнем с базового примера, а затем я объясню, как это работает.

Базовый пример центрированного меню

Ниже вы должны увидеть четыре горизонтально центрированных вкладки в этом столбце текста, вторая вкладка установлена ​​как активная. Попробуйте изменить размер окна браузера и размер текста страницы, чтобы увидеть, как меню всегда остаются по центру и доступны для нажатия.

См. Еще несколько примеров расширенного центрированного меню CSS

Центрированное меню HTML

HTML, используемый для центрированных меню, семантически структурирован и очень прост.Структура &#8212; это просто список ссылок в одном блоке div.

Центрированное меню CSS

Ниже приведен CSS, используемый для центрирования вкладок на странице.См. Ниже объяснение того, как это работает.

Как работает метод центрирования

Уловка моего метода центрирования заключается в том, как плавающие элементы относительно друг друга расположены. Чтобы объяснить это правильно, позвольте мне сначала описать, как элемент может изменять свои размеры при перемещении.

Не плавающий div

Вот div (элемент уровня блока), который не является плавающим. Обратите внимание, как он растягивается до 100% ширины содержащего его элемента, в данном случае до всей страницы.

Левый плавающий div

Если теперь мы переместим div влево, он автоматически сожмется, чтобы соответствовать ширине содержимого внутри себя. Теперь его ширина равна ширине текста «Div». Это сжатие является ключом к процессу центрирования, оно помогает нам переместить наше меню на нужную величину в центр.

Стандартное меню с выравниванием по левому краю

Давайте воспользуемся традиционным меню с выравниванием по левому краю и шаг за шагом переместим вкладки в центр. Я покрасил каждый элемент в другой цвет, чтобы было легко увидеть, как все они вложены друг в друга.

Обратите внимание на следующее.

  • Блок div &#8216;centeredmenu&#8217; (синий прямоугольник) перемещается влево, но мы задаем ему ширину 100%, чтобы он оставался растянутым по всей странице.
  • Элемент ul (розовая рамка) находится внутри div &#8216;centeredmenu&#8217; и перемещается влево.Это означает, что ul будет уменьшаться до ширины своего содержимого, как раз так получилось, что это ширина всех вкладок.
  • Все элементы li (зеленые прямоугольники) находятся внутри ul, и каждый перемещается влево. Это заставляет их сжиматься вокруг ссылки внутри себя, и все они выстраиваются в горизонтальный ряд.
  • Внутри каждой ссылки (оранжевое поле) находится текст, который появляется на вкладке; Вкладка 1, вкладка 2 и т. Д.
Сдвиг позиции неупорядоченного списка

Затем мы смещаем элемент ul вправо на 50%, используя значение position: relative; .При перемещении элемента в сторону на процент таким образом важно отметить, что он будет перемещать процент от его , содержащий ширину элемента , а не своей собственной ширины. Таким образом, в этом случае элемент ul переместится вправо на 50% ширины div &#8216;centeredmenu&#8217; &#8212; это половина окна браузера. Конечным результатом является то, что наши меню начинаются с середины экрана и частично выходят за пределы страницы вправо, но не волнуйтесь, еще на одном шаге они будут в центре.

Сдвиг позиции всех позиций

Последний шаг &#8212; сдвинуть все элементы li назад влево на 50%. Это 50% ширины элемента ul (содержащего его элемента), и он поместит вкладки точно в центр окна.

Некоторые важные примечания

Этот метод центрирования меню надежен, но есть несколько вещей, о которых вы должны знать.

  • Поскольку элемент ul частично находится за пределами страницы, окно браузера будет прокручиваться в сторону, если вы не добавите overflow: hidden; правило для div &#8216;centermenu&#8217;.Это отрубит нависающий div. Если вы не хотите использовать переполнение : hidden; , затем просмотрите мою статью о центрированном раскрывающемся меню, в которой объясняется, как его удалить.
  • Поскольку элемент ul не выровнен с вкладками, вы не можете добавить к нему какой-либо видимый стиль. Оставьте элемент ul без цвета фона и без рамки, чтобы он был полностью невидимым. Делайте все стили вкладок только для элементов li и a.
  • Если вам нужно стилизовать первую или последнюю вкладку по-другому, чем остальные, добавьте класс к первому и последнему элементу li, чтобы на них можно было нацеливаться индивидуально.

Итак, вот основные особенности меню, центрированных на чистом CSS.

Нет CSS-хаков

CSS, используемый для этих центрированных меню, на 100% действителен и не требует взлома. Чтобы преодолеть модель разбитого ящика Internet Explorer, не используются горизонтальные отступы или поля. Вместо этого в этом дизайне используется умное относительное позиционирование.

Действительная строгая разметка XHTML

HTML в этих центрированных меню проверяется как строгий XHTML 1.0.

Совместимость с изменяемым размером текста

Эти центрированные вкладки полностью совместимы с текстом изменяемого размера.Изменяемый размер текста важен для доступности в Интернете. Люди с ослабленным зрением могут увеличить текст, чтобы им было легче читать. Становится все более важным сделать ваш веб-сайт совместимым с текстом с изменяемым размером, потому что люди ожидают более высокого уровня веб-доступности.

JavaScript не требуется

JavaScript не требуется. Некоторые макеты веб-сайтов полагаются на хаки JavaScript для изменения размеров div и принудительного размещения элементов, но вы не увидите здесь ничего подобного.

Полная кроссбраузерная совместимость

Меню, центрированные на чистом CSS, были протестированы в следующих браузерах.

iPhone и iPod Touch
  • Firefox 2+
  • Safari
  • Opera
  • Google Chrome
  • Internet Explorer 5.5 и выше.

Не забудьте просмотреть более сложные примеры центрированных вкладок, чтобы увидеть, что можно сделать.

Если вы хотите добавить раскрывающиеся меню, то я тоже вам помог.

Обновлено: 26 июля 2008 г.

Первая публикация: 27 июля 2008 г.

Как создать центрированное горизонтальное меню навигации с помощью простого CSS

Размещено: 17 мая, 2016

Автор: Мик Шерри

В этом простом руководстве по CSS мы создадим центрированное горизонтальное меню навигации.

Использование CSS может быть непростым делом, если вы сначала не определите фиксированную ширину для элементов списка… Дело в том, что никто не захочет объявлять элемент фиксированной ширины, если в этом нет необходимости.

В мире адаптивного веб-дизайна обычно рекомендуется избегать установки фиксированной ширины для элемента (если вы можете этого избежать), потому что это обычно означает, что элемент будет иметь большую гибкость, когда дело доходит до отображения на всех размерах устройств и будет более удобным, если веб-мастер использует CMS.

Еще одна причина, по которой мне нравится эта техника, заключается в том, что я считаю симметрию очень привлекательной в веб-дизайне. При работе с моими веб-дизайнами золотого берега я часто прибегаю к тому, чтобы пункты меню располагались равномерно и по центру, если это помогает создать симметрию и дополняет общий макет.

Для начала, наша стандартная разметка меню:

Теперь базовый CSS для получения нашего горизонтального меню навигации:

Как вы можете видеть ниже, у нас очень простое (и очень ванильное) горизонтальное меню навигации.

Поскольку элементы списка отображаются как встроенные, теперь они располагаются горизонтально и выровнены по левому краю

Теперь нам нужно добавить только 2 дополнительных свойства CSS, чтобы элементы меню привязывались к центру контейнера (выделено жирным шрифтом).

Как видите, с двумя небольшими изменениями в CSS легко создать удобную центрированную горизонтальную навигацию без необходимости устанавливать какую-либо фиксированную ширину, а полностью совместим с IE8 и выше.

Если вы хотите увидеть приведенный выше код в действии, посетите отзывчивый jsfiddle iframe здесь.

Как переместить элементы на панели навигации в центр &#8212; HTML и CSS &#8212; Форумы SitePoint

Когда я изменил все элементы на элементы списка на панели навигации, логотип теперь находится сверху, но не в одной строке с другими кнопками. Не знаю почему.

Ваш первый логотип будет рядом с текстом в навигационной панели теперь, когда он находится внутри элемента списка display: inline-block.Вам нужно будет установить элементы списка на vertical-align: middle, если вы хотите, чтобы середина изображения была выровнена с текстом…

Вам также необходимо удалить ширину: 10%, которую вы применили к изображению, поскольку в этом случае это ерунда. Если у вас очень большое изображение, и вы уменьшаете его в 10 раз, то для начала вам будет лучше с меньшего изображения.Так как я не могу видеть ваше изображение, могу только догадываться, что вы с ними делаете &#128578;

Изображение в социальной сети находится на своем месте и будет находиться на том месте, где вы его разместили. Если вы не хотите, чтобы он там был, поместите его в другое место, но обратите внимание, что абсолютные элементы размещаются по отношению к ближайшему позиционированному предку (если его нет, то они размещаются по отношению к корневому элементу (фактически, начальному окну просмотра)).

Причина, по которой я использовал высоту, заключается в том, что я хотел использовать несколько разных изображений в качестве фона при прокрутке страницы вниз

Все зависит от того, как это структурировано, но обычно содержимое контролирует высоту div.Если у вас нет (или мало) контента, вы просто собираетесь показать большое фоновое изображение?

Нам, вероятно, потребуется увидеть макет дизайна, чтобы понять, чего вы пытаетесь достичь.

Я также предлагаю вам зарегистрировать бесплатную учетную запись codepen и разместить свои демонстрации в Интернете, чтобы мы могли видеть фактический код, который вы используете по мере развития сайта.

Наконец, это может быть уместно, если вы, возможно, пройдете курс или два по основам html и css во время практики, поскольку многие из этих проблем, с которыми вы сталкиваетесь, будут рассмотрены в первых нескольких уроках.Вы обнаружите, что прогрессируете намного лучше, если разберетесь с некоторыми концепциями. CSS не сложен (базовый CSS), но в нем есть правила и методы, которые необходимо понять, прежде чем вы сможете прогрессировать.

Еще одна проблема, с которой я столкнулся, заключается в том, что при прокрутке вниз другие элементы, такие как «HAYQ» или «Армянские специальные предложения», перекрываются на панели навигации. Я бы хотел это исправить.

Ваша навигационная система имеет фиксированное положение, что означает, что она больше не участвует в потоке документа и будет располагаться поверх всего на пути.Фиксированное позиционирование трудно контролировать даже тем, кто разбирается в css, и его лучше избегать. Это нормально для верхних или нижних колонтитулов с фиксированной высотой с одним или двумя словами, но как только в них есть несколько текстовых элементов, становится почти невозможно их разместить в гибком макете. Вероятно, вам лучше взглянуть на липкий заголовок, который обычно достигается с помощью JS (хотя некоторые браузеры поддерживают position: sticky).

В настоящее время вы можете добавить верхний отступ к элементу body, чтобы ваш контент начинался ниже фиксированного заголовка.

Однако 5em пахнет «магическими числами», и вам нужно будет следить за высотой вашего заголовка, потому что, если ваш текст переносится на другую строку, содержимое снова будет перекрываться. Вы можете сделать это с помощью медиа-запросов и увеличить заполнение или уменьшить размер содержимого. Хотя все это очень утомительно.

Как выровнять меню Divi по правому, левому или центру

Этот быстрый совет по Divi Pro устранит путаницу и покажет, как выровнять модуль меню в Divi Theme Builder по правому, левому или центру.

Мы что-то упускаем?

Поиск правильной настройки меню Divi

Когда Divi Theme Builder был выпущен вместе с Divi 4.0, он принес с собой новый модуль меню. Это отличный новый модуль с большим потенциалом, но он также внес некоторую путаницу. Старое стандартное меню было выровнено по правому краю по умолчанию, но новый модуль меню по умолчанию выровнено по левому краю.Странно, правда?

Многие люди начали спрашивать об этом в группах Facebook, и многие были сбиты с толку и расстроены. Но ответ довольно прост &#8212; параметры выравнивания есть прямо в настройках модуля, они просто не там, где вы ожидаете.

Как выровнять текст меню Divi

Переключатель макета

Когда вы откроете модуль меню на вкладке «Дизайн», вы заметите, что стиль меню имеет три варианта:

  • Выровнен по левому краю
  • по центру
  • Встроенный центрированный логотип

Это, конечно, сбивает с толку.В поле «Выровнено по левому краю» должно быть написано что-то вроде «По умолчанию» или «Пользовательский», поэтому я не знаю, как это ускользнуло. Оставьте этот параметр на этом уровне или, если он был у вас на другом, установите его обратно на «Выровнено по левому краю» , чтобы это сработало.

Переключатель текста меню

Ответ &#8212; перейти к следующему переключателю, переключателю «Текст меню». Оказавшись там, прокрутите вниз, и вы найдете типичные параметры выравнивания текста, которые у нас есть для любого другого типа текста.

Как видите, здесь есть варианты для левого, центрального, правого и выровненного текста.Изменение этого выравнивает весь текст меню Divi, и это скрытое решение в противном случае загадочной ситуации.

Последнее обновление: 7 июл.2021 в 15:40

Вот и все!

Каждый месяц мы рассылаем информационный бюллетень по электронной почте с последними учебными материалами, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями.Иногда мы отправляем дополнительные отдельные электронные письма здесь и там, если нам просто не терпится! Вот что вы получите, если подпишетесь, и вы всегда можете отказаться от подписки в любое время, если просто не можете больше это терпеть

Нельсон &#8212; владелец компании Pee-Aye Creative Co в прекрасном штате Пенсильвания. Он любит помогать малому бизнесу, исследовать, создавать веб-сайты с Divi и обучать других.

Оставить отзыв!

Комментируя, вы соглашаетесь с нашей Политикой в ​​отношении комментариев для блогов и YouTube.

Каждый месяц мы рассылаем информационный бюллетень по электронной почте с последними учебными материалами, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями.Иногда мы отправляем дополнительные отдельные электронные письма здесь и там, если нам просто не терпится! Вот что вы получите, если подпишетесь, и вы всегда можете отказаться от подписки в любое время, если просто не можете больше это терпеть

Пункты меню центрирования &#8212; Max Mega Menu

Для центрирования пунктов меню в строке меню :

  1. Перейдите в Мега-меню > Темы меню.
  2. Установите «Пункты меню выровнять по центру»

Выравнивание текста можно настроить для различных уровней (верхний уровень, второй и третий уровень в мегаменю, всплывающие меню) в редакторе тем:

  1. Перейдите в Мега-меню > Темы меню .
  2. Выберите тему меню и прокрутите вниз. Введите следующее в область Custom Styling:
    .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *