CSS: выравнивание по центру
CSS: выравнивание по центруЦентрирование
Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:
В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:
Центрирование строк текста
Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:
P { text-align: center } h3 { text-align: center }
которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:
Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.
Центрирование блока или изображения
Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:
P.blocktext { margin-left: auto; margin-right: auto; width: 6em } ... <P>Этот довольно ...
Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.
Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:
IMG.displayed { display: block; margin-left: auto; margin-right: auto } ... <IMG src="..." alt="...">
Следующее изображение центрировано:
Вертикальное центрирование
CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы может быть выровнено по центру вертикально.
Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.
DIV.container { min-height: 10em; display: table-cell; vertical-align: middle } ... <DIV> <P>Этот маленький абзац... </DIV>
Этот маленький абзац центрирован вертикально.
Центрирование по вертикали в CSS уровня 3
Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:
Этот абзац выровнен вертикально по центру.
Для документа, который выглядит вот так:
<div class=container3> <p>Этот абзац… </div>
таблица стилей выглядит так:
div.container3 { height: 10em; position: relative } /* 1 */ div.container3 p { margin: 0; position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) } /* 4 */
Основные правила:
- Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
- Сам элемент сделайте абсолютно позиционированным (position: absolute).
- Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
- Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)
Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.
Этот абзац выровнен по центру вертикально.
таблица стилей выглядит следующим образом:
div.container5 { height: 10em; display: flex; align-items: center } div.container5 p { margin: 0 }
Вертикальное и горизонтальное центрирование в CSS уровня 3
Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.
Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.
Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:
<div class=container4> <p>Центр! </div>
В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:
div.container4 { height: 10em; position: relative } div.container4 p { margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }
Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.
Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:
с этой таблицей стилей:
div.container6 { height: 10em; display: flex; align-items: center; justify-content: center } div.container6 p { margin: 0 }
т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.
Центрирование в области просмотра в CSS уровня 3
Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)
<html> <style> body { background: white } section { background: black; color: white; border-radius: 1em; padding: 1em; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } </style> <section> <h2>Красиво выровнен по центру</h2> <p>Этот текстовый блок выровнен вертикально по центру. <p>И горизонтально, если окно достаточно широкое. </section>
Вы можете увидеть результат в отдельном документе.
Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.
Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.
(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)
Навигация по сайту
Как сделать фиксированное меню
Узнайте, как создать «фиксированное» меню с помощью CSS.
Как создать фиксированное верхнее меню
Шаг 1) добавить HTML:
Пример
Home
News
Contact
<div>
<p>Some text some text some text some text..</p>
</div>
Шаг 2) добавить CSS:
Чтобы создать фиксированное верхнее меню, используйте position:fixed
и top:0
margin-top
(к содержимому), которое равно или больше, чем высота вашего меню.Пример
/* The navigation bar */.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* 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
:
Пример
/* The navigation bar */.navbar {
position: fixed; /* Set the navbar to fixed position */
bottom: 0; /* Position the navbar at the bottom of the page */
width: 100%; /* Full width */
}
/* 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 |
|
Значения
- center
- Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
- justify
- Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
- left
- Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
- right
- Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
- auto
- Не изменяет положение элемента.
- inherit
- Наследует значение родителя.
- start
- Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
- end
- Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-align</title>
<style>
div {
border: 1px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
margin-bottom: 5px; /* Отступ снизу */
}
#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; }
.content {
width: 75%; /* Ширина слоя */
background: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<div><div>Выравнивание по левому краю</div></div>
<div><div>Выравнивание по центру</div></div>
<div><div>Выравнивание по правому краю</div></div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание текста в браузере Safari
Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).
Рис. 2. Выравнивание текста в браузере Internet Explorer 7
Объектная модель
[window.]document.getElementById(«elementID»).style.textAlign
Браузеры
IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.
Красивое выравнивание блоков по резиновой сетке — CSS-LIVE
Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.
При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?
Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!
Проблема
Для начала предлагаю обсудить этот вопрос подробнее. Посмотреть примеры того, что именно за неприятность происходит с последней строкой в сетке, а так же определиться, какого результата мы ждём.
Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center. А так же воспользуемся маркированным списком.
<ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Пункт 6</li> <li>Пункт 7</li> <li>Пункт 8</li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; text-align: center; } ul li { display : inline-block; width : 80px; height: 80px; margin-bottom: 10px; background: #E76D13; vertical-align: top; text-align: center; line-height: normal; /* эмуляция inline-block для IE6-7*/ //display : inline; //zoom : 1; }
Ничего необычного в коде нет. Обычный список, всё те же старые добрые элементы строчно-блочного (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 — нет. Но зато мы точно знаем, что если строка, за которой идёт следующая (допустим последняя) будет полностью заполнена, то эти свойства будут выравнивать нашу сетку по нашим правилам. И даже при резиновой ширине контейнера такие заполненные строки будут вести себя так, как нам хотелось бы.
Какой же вывод можно из этого сделать? И как можно связать эти вещи с последней строкой, в которой может быть всего один блок? Ответ прост. Нам нужно придумать, как можно заполнить последнюю строку так, чтобы, оставшееся от общей ширины блоков пространство, было чем-то заполнено, и мало того, чтобы это «чем-то» могло переходить на следующую строку, для того, чтобы наши свойства работали безукоризненно.
Итак, для заполнения последней строки, мы будем использовать псевдоэлемент, сгенерированный при помощи :after. Это хороший вариант, так как он поможет решить нам нашу задачу и избавит от лишнего мусора в разметке. По умолчанию псевдоэлементы генерируют строчный блок, а значит именно то, что нам и нужно. Так как inline-block будет представлять из себя одну большую, неразрывную букву и не сможет разбиться на несколько «кирпичей», что не приведёт ни к чему путному. Ну, а block сразу же займёт отдельную строку, и так же, как и inline-block — не принесёт результатов. При этих значениях наша ситуация будет выглядеть примерно так.
ul:after { content: 'display: block, мало контента'; display: block; background: #E76D13; }
Как видно, из скриншота, вспомогательный блок сразу же занял новую строку, оставив прежнюю (последнюю по факту) подчиняться правилам алгоритма. Каких-то положительных результатов такими средствами добиться невозможно, как бы вы не пытались, так что отбрасываем эти вещи и переходим к настоящему решению…
Из всего вышесказанного можно понять одно, что в нашей ситуации нам может помочь элемент, именно строчного (inline) уровня, т.е. обычный display : inline + строка текста, с пробелами между слов.
ul:after { content: 'Обычный строковый элемент, обычный строковый элемент, обычный строковый элемент'; background: #E76D13; }
Да, очень похоже. Из скриншота ясно, строчный блок, мало того, что смог повлиять на последнюю строку, так ещё и перенёсся на следующую не полностью, оставив на предыдущей строчке неразрывное слово. По этому слову видно, что по своей ширине оно немного не дотягивает до ширины блоков (100px), а если бы дотягивало, то, возможно, у нас и вышло бы что-то путное.
В общем поэкспериментировав какое-то время с вышесказаннным, на свет родилось следующее решение.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: center; margin: 0px 0 10px; } ul:after { content: ' i i i i i i i i '; word-spacing: 97px; padding-left: 97px; /* visibility: hidden; Скрыл это свойство, ради демонстрации процесса*/ } ul li { display : inline-block; width : 100px; height: 100px; margin: 0px 0 20px; background: #E76D13; vertical-align: top; text-align: center; /* эмуляция inline-block для IE6-7*/ //display : inline; //zoom : 1; }
Здорово! Наша сетка выровнена так, как нам надо. Сразу же скажу, что такое выравнивание получается при любой ширине экрана, что не может не радовать. А теперь сама суть.
Значит у нас есть строка «i i i i i i i i» , состоящая из букв и пробелов, но это не простые буковки и пробелы, как может показаться на первый взгляд. Во-первых сама буква i выбрана не случайно. Дело в том, что буква i сама по себе узкая, за счёт чего ей легко управлять и подгонять нужную ширину. Во-вторых сами пробелы состоят не только из символа пробела, но и из word-spacing, т.е. его значение плюсуется к пробелу, что в сумме даёт нужную нам ширину. Да, и конечно же, нужно учитывать, что связка «пробел + word-spacing» работает только тогда, когда в конце неё идёт другой символ, отличный от пробельного. Так как пробелы имеют свойство «схлопывания», то буквы i, идущие после word-spacing не дают им этого сделать.
Так что, по сути, мы имеем неразрывные псевдоблоки, в виде «буквы + padding-left» вначале псевдоэлемента, а далее в виде связки «пробел + word-spacing + буква», и так до конца строки. Ну, а на следующей строчке всё повторяется заново, только первый псевдоблок состоит теперь из одной буквы. Но эта строка нас уже не волнует, нас интересуют только те «добавочные блоки», которые дополняют последнюю строку с нормальными блоками в сетке.
Кстати, букв должно хватить, чтобы гарантировано заполнить последнюю строку до конца в худшем случае. Т.е. их число должно быть равно максимальному кол-ву блоков в строке.
Да, и, конечно же, с text-align: justify этот метод работает точно так же.
Но это были плюсы, а как же минусы? Минусы у этого варианта таковы:
Во-первых, в нестабильной работе в Opera, блоки в которой, временами имеют нечёткое выравнивание по сетке. Причём это касается только последней и предпоследней строк. Не понятно, из-за чего это происходит, к сожалению мне так и не удалось это выяснить. Возможно проблема кроется в том, что крайняя буква прилипает к блоку, не чувствуя между ними пробела. В любом случае, очень надеюсь на то, что в комментах кто нибудь сможет дать пояснение этой загвоздки. Но, в целом, это не выглядит безобразно, т.е. работает, но просто немного нестабильно.
Во-вторых, из-за создания дополнительных элементов снизу образовывается неприятный отступ, который происходит за счёт его размера шрифта и межстрочного интервала. Лекарство в виде обнуления шрифта + межстрочного интервала у родителя и восстановлением их в нормальное состояние у потомков — не приносит результата, так как нужная нам строка в псевдоэлементе становится невидимая, и наша сетка перестаёт её чувствовать и поддаваться дрессировке.
Но есть всё же «почти» выход из ситуации, это нижний отрицательный margin, который может подтянуть часть своего «хвоста», позволяя следующим за ним элементам налезать на него. Подробнее об этом можно почитать тут. Я сказал «почти», потому что этот способ выручает отчасти, я бы сказал, на половину, может чуть больше. Так как в момент создания, уже двух-строчного хвоста, из букв, подтянуть обе строки, уже не представляется возможности.
Во-третьих, чтобы заставить этот метод работать в IE6-7, нам потребуется заменить наш псевдоэлемент дополнительным блоком-помощником, который будет вставлен в конце списка. Плюс к этому придётся воспользоваться такими средствами, как text-justify, text-align-last (их поведение я уже описывал в этой статье), восстановлением свойства zoom в начальное состояние, у дополнительного блока и прочими «радостями», благодаря которым, в этих браузерах наш способ будет работать так же. В конце статьи я обязательно приведу разные варианты этой задачи, чтобы вы могли выбрать нужный.
Резюме
В этой статье мы доказали, что блочная сетка не такая уж и неподвластная. Как оказалось, это вполне управляемая конструкция. Мало того, красивое выравнивание блоков в сетке можно достичь совершенно обычным и не трудным способом, а результат позволяет нам легко использовать его плоды в любых проектах. Что я и делаю, когда предоставляется такая возможность.
Да, и конечно же, хочется выразить огромную благодарность Илье Стрельцыну (@SelenIT2) за его идеи и невероятную помощь в материалах. Без него бы этой статьи не было.
Все решения воедино
Обновление от 30.03.2017: Современное решение этой задачи на Grid Layout (без хаков и лишнего кода)
P.S. Это тоже может быть интересно:
Способы вертикального выравнивания по центру в CSS.
Способы вертикального выравнивания по центру в CSS.
Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.
Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.
1-ый способ
Этот метод предполагает, что мы устанавливаем некоторому элементу <div> способ отображения как таблица, после этого мы можем использовать в нём свойство vertical-align (которое работает по разному в различных элементах).
<div>
<div>
<div>
Некоторая полезная информация, которая должна располагаться по центру.
</div>
</div>
</div>
#wrapper{
display : table;
}
#cell{
display : table-cell;
vertical-align : middle;
}
Плюсы
- Контент может динамически изменять высоту (высота не определена в CSS).
- Контент не обрезается в случае, если для него недостаточно места.
Минусы
- Не работает в IE 7 и меньше
- Много вложенных тэгов
2-ой метод
Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.
Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.
<div>
Content Here
</div>
#content {
position : absolute;
top : 50%;
height : 240px;
margin-top : -120px; /* минус от половины высоты */
}
Плюсы
- Работает во всех броузерах.
- Нет лишней вложенности.
Минусы
- Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.
3-ий метод
В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.
<div>
<div>
здесь контент
</div>
</div>
#floater{
float : left;
height : 50%;
margin-bottom : -120px;
}
#content{
clear : both;
height : 240px;
position : relative;
}
Плюсы
- Работает во всех броузерах.
- Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.
Минусы
- Думаю только один: что используется лишний пустой элемент.
4-ый метод.
Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).
<div>
Важная информация.
</div>
#content{
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
margin : auto;
height : 240px;
width : 70%;
}
Плюсы
Минусы
- Не работает в Internet Explorer
- Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.
5-ый метод
С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.
<div>
Какая-то строка текста
</div>
#content{
height : 100px;
line-height : 100px;
}
Плюсы
- Работает во всех броузерах.
- Не обрезает текст, если он не влез.
Минусы
- Работает только с текстом (не работает с блочными элементами).
- Если текста больше чем одна строка, то выглядит очень плохо.
Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.
Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:
Шаг 1
Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:
- #floater (чтобы выровнять контент по центру)
- #centred (центральный элемент)
- #side
- #logo
- #nav (список
<ul>
)
- #content
- #side
- #bottom (для копирайтов и всего такого)
Напишем следующую html-разметку:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Centred Company</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
<body>
<div></div>
<div>
<div>
<div><strong><span>A</span> Company</strong></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div>
<h2>Page Title</h2>
<p>
Holisticly re-engineer value-added outsourcing after
process-centric collaboration and idea-sharing.
Energistically simplify impactful niche markets via
enabled imperatives. Holisticly predominate premium
innovation after compelling scenarios. Seamlessly
recaptiualize high standards in human capital with
leading-edge manufactured products. Distinctively
syndicate standards compliant schemas before robust
vortals. Uniquely recaptiualize leveraged web-readiness
vis-a-vis out-of-the-box information.
</p>
<h3>Heading 2</h3>
<p>
Efficiently embrace customized web-readiness rather
than customer directed processes. Assertively grow
cross-platform imperatives vis-a-vis proactive
technologies. Conveniently empower multidisciplinary
meta-services without enterprise-wide interfaces.
Conveniently streamline competitive strategic theme
areas with focused e-markets. Phosfluorescently
syndicate world-class communities vis-a-vis value-added
markets. Appropriately reinvent holistic services
before robust e-services.
</p>
</div>
</div>
<div>
<p>
Copyright notice goes here
</p>
</div>
</body>
</html>
Шаг 2
Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.
html, body {
margin : 0;
padding : 0;
height : 100%;
}
body {
background : url('page_bg.jpg') 50% 50% no-repeat #FC3;
font-family : Georgia, Times, serifs;
}
#floater {
position : relative;
float : left;
height : 50%;
margin-bottom : -200px;
width : 1px;
}
#centered {
position : relative;
clear : left;
height : 400px;
width : 80%;
max-width : 800px;
min-width : 400px;
margin : 0 auto;
background : #fff;
border : 4px solid #666;
}
#bottom {
position : absolute;
bottom : 0;
right : 0;
}
#nav {
position : absolute;
left : 0;
top : 0;
bottom : 0;
right : 70%;
padding : 20px;
margin : 10px;
}
#content {
position : absolute;
left : 30%;
right : 0;
top : 0;
bottom : 0;
overflow : auto;
height : 340px;
padding : 20px;
margin : 10px;
}
Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.
Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;
Сейчас ваша страничка должна выглядеть приблизительно так:
Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.
Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.
Шаг 3
И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.
#nav ul {
list-style : none;
padding : 0;
margin : 20px 0 0 0;
text-indent : 0;
}
#nav li {
padding : 0;
margin : 3px;
}
#nav li a {
display : block;
background-color : #e8e8e8;
padding : 7px;
margin : 0;
text-decoration : none;
color : #000;
border-bottom : 1px solid #bbb;
text-align : right;
}
#nav li a::after {
content : '»';
color : #aaa;
font-weight : bold;
display : inline;
float : right;
margin : 0 2px 0 5px;
}
#nav li a:hover, #nav li a:focus {
background : #f8f8f8;
border-bottom-color : #777;
}
#nav li a:hover::after {
margin : 0 0 0 7px;
color : #f93;
}
#nav li a:active {
padding : 8px 7px 6px 7px;
}
Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.
Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.
Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.
Шаг 4
Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.
#centered {
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
border-radius : 8px;
}
h2, h3, h4, h5, h5, h6 {
font-family : Helvetica, Arial, sans-serif;
font-weight : normal;
color : #666;
}
h2 {
color : #f93;
border-bottom : 1px solid #ddd;
letter-spacing : -0.05em;
font-weight : bold;
margin-top : 0;
padding-top : 0;
}
#bottom {
padding : 10px;
font-size : 0.7em;
color : #f03;
}
#logo {
font-size : 2em;
text-align : center;
color : #999;
}
#logo strong {
font-weight : normal;
}
#logo span {
display : block;
font-size : 4em;
line-height : 0.7em;
color : #666;
}
p, h3, h4 {
line-height : 1.6em;
}
a {
color : #f03;
}
В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.
Совместимость
Как вы уже наверное предположили, основной источник проблем совместимости — Internet Explorer:
- Элементу #floater обязательно надо установить ширину
- В IE 6 лишние отступы вокруг меню
Результат.
HTML/CSS. Как создать вертикальное и горизонтальное меню
Эта инструкция продемонстрирует, как создать вертикальное и горизонтальное меню используя стили CSS. Перед началом убедитесь, что вы знакомы с HTML тэгами ненумерованного списка. Кроме того, посмотрите инструкцию как создать меню в HTML.
Для начала создадим HTML меню на основе ненумерованного списка:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Contacts</a></li> </ul>
Теперь необходимо создать CSS файл и подключить его к странице:
<link href="style.css" rel="stylesheet" type="text/css" />
Убедитесь, что код подключающий CSS находится в разделе <head> вашего документа.
Вы можете использовать и inline стили.
<style type="text/css"> ...тут расположите ваши стили CSS... </style>
В результате у вас должен получиться следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Contacts</a></li> </ul> </body> </html>
Несортированный список обладает собственными стилями и таким образом без любых дополнительных изменений мы получаем вертикальное меню.
Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.
В первую очередь добавьте класс в список. Замените <ul> на <ul>
Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:
ul.horizontal{ margin:0; padding:0; }
Теперь сделаем список горизонтальным:
ul.horizontal li{ display:block; float:left; padding:0 10px; }
Мы добавили значения 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;
.
Таким образом можно добиться такого центрирования:
Границу зеленого цвета имеет внутренний блок с id = block-inner, прерывистую красную границу имеет внешний блок с id = block.
HTML-код примера изображенного ниже выглядит так:
<div> <div><div> Содержимое блока </div></div> </div>
CSS-код примера изображенного ниже выглядит так:
#block { position: relative; float: left; left: 50%; border: 1px dashed #a00; } #block-inner { position: relative; float: left; right: 50%; border: 2px solid #0a0; padding: 10px; } #page { overflow: hidden; }
Пример выравнивания пунктов меню
Практически данный выше пример можно применить при горизонтальном выравнивании меню сайта. Однако, при этом нужно принять во внимание то, что при достаточно большом количестве пунктов (занимающих по ширине больше половины страницы) появляется горизонтальная прокрутка. Чтобы от нее избавиться нужно во внешнем блоке применить свойство overflow
. Если меню выпадающее, то его выпадающие пункты могут срезаться этим внешним блоком. Чтобы избежать этой проблемы, необходимо применять свойство overflow
к блоку как можно более объемлющему, например, самому внешнему блоку, обрамляющего все содержимое страницы.
Например можно выравнять меню так:
Границу зеленого цвета имеют пункты li
списка ul
, прерывистую красную границу имеет список ul
.
HTML-код примера изображенного ниже выглядит так:
<div> <ul> <li><a href="#">Выравненный пункт 1</a></li> <li><a href="#">Выравненный пункт 2</a></li> <li><a href="#">Выравненный пункт 3</a></li> <li><a href="#">Выравненный пункт 4</a></li> <li><a href="#">Выравненный пункт 5</a></li> </ul> </div>
CSS-код примера изображенного ниже выглядит так:
#menu { position: relative; float: left; left: 50%; border: 1px dashed #a00; list-style: none; margin: 0; padding: 0; } #menu li { position: relative; float: left; right: 50%; border: 2px solid #0a0; padding: 10px; } #page { overflow: hidden; }
Так что все довольно просто. Желаю успехов в освоении новых методов.
html — Как выровнять панель навигации по центру с помощью css
html — Как выровнять панель навигации по центру с помощью css — qaruПрисоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено 42к раз
Мне нужна помощь, чтобы выровнять панель навигации по центру Вот мой код. Что с ним не так? Это не выравнивает меню по центру.
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
маржа: 0 авто;
}
#nav ul {
маржа: 0;
отступ: 0;
тип-стиль-список: нет;
}
#nav ul li {
маржа: 0;
отступ: 0;
плыть налево;
}
#nav ul li a {
текстовое оформление: нет;
отступ: 10 пикселей 20 пикселей;
дисплей: блок;
цвет: #FFF;
выравнивание текста: центр;
}
Джош Крозье206k5050 золотых знаков347347 серебряных знаков277277 бронзовых знаков
Создан 20 фев.
Джас Джашимджас Джашим14611 золотой знак11 серебряный знак88 бронзовых знаков
Один из способов — установить display
из #nav ul
на inline-block
.Затем добавьте text-align: center
к родительскому элементу, чтобы центрировать дочерний ul
:
Пример
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
выравнивание текста: центр;
}
#nav ul {
маржа: 0;
отступ: 0;
дисплей: встроенный блок;
}
В качестве альтернативы вы также можете установить отображение
родительского элемента, с #nav
на flex
, а затем добавить justify-content: center
для центрирования дочернего элемента по горизонтали.
Пример
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
дисплей: гибкий;
justify-content: center;
}
Создан 20 фев.
Джош КрозьеJosh Crozier206k5050 золотых знаков347347 серебряных знаков277277 бронзовых знаков
0Здесь нет ничего страшного.
Просто добавьте text-align: center
к ul
и сделайте li
display: inline-block
HTML
CSS
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
маржа: 0 авто;
}
#nav ul {
маржа: 0;
отступ: 0;
стиль списка: нет;
выравнивание текста: центр;
}
#nav ul li {
маржа: 0;
отступ: 0;
дисплей: встроенный блок;
}
#nav ul li a {
текстовое оформление: нет;
отступ: 10 пикселей 20 пикселей;
дисплей: блок;
цвет: #FFF;
выравнивание текста: центр;
}
Проверить скрипку
Создан 20 фев.
раджураджу38211 серебряный знак1111 бронзовых знаков
#nav {
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
маржа: 0 авто;
}
#nav ul {
маржа: 0;
отступ: 0;
выравнивание текста: центр;
}
#nav ul li {
маржа: 0;
отступ: 0;
дисплей: встроенный блок;
положение: относительное;
}
#nav ul li a {
текстовое оформление: нет;
отступ: 10 пикселей 20 пикселей;
дисплей: блок;
цвет: #FFF;
выравнивание текста: центр;
}
Используйте этот CSS, и вы получите решение.Добавьте относительное положение Li, если вам требуется выпадающий список для некоторых категорий
Создан 20 фев.
Вы можете настроить отображение ul: inline-block; и установите text-align: center; в родительскую навигацию:
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
выравнивание текста: центр;
}
#nav ul {
маржа: 0;
отступ: 0;
дисплей: встроенный блок;
}
Создан 20 фев.
Pik_atPik_at1,9198 серебряных знаков1313 бронзовых знаков
#nav ul {
маржа: авто;
отступ: 0;
}
user714.7k44 золотых знака3535 серебряных знаков6262 бронзовых знака
Создан 20 фев.
RoiRoi54111 золотой знак1010 серебряных знаков2222 бронзовых знака
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
маржа: 0 авто;
выравнивание текста: центр;
}
#nav ul {
маржа: авто;
отступ: 0;
Документ без названия
<стиль>
#nav {
позиция: абсолютная;
слева: 0px;
высота: 40 пикселей;
цвет фона: # 2C64B4;
ширина: 100%;
маржа: 0 авто;
выравнивание текста: центр;
}
#nav ul {
маржа: авто;
отступ: 0;
переполнение: скрыто;
дисплей: встроенный блок;
}
#nav ul li {
маржа: 0;
отступ: 0;
плыть налево;
}
#nav ul li a {
текстовое оформление: нет;
отступ: 10 пикселей 20 пикселей;
дисплей: блок;
цвет: #FFF;
выравнивание текста: центр;
}
переполнение: скрыто;
дисплей: встроенный блок;
}
Создан 20 фев.
НаянНаян11688 бронзовых знаков
Я сделал это так, как это работает, но вы также должны дать класс и организовать мобильный и настольный компьютер.Также я использовал для начальной загрузки.
Создан 25 дек.
lang-html
Stack Overflow лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
Как центрировать меню навигации Учебное пособие
главная »код» css »css центр nav
Как всегда, есть много способов снять шкуру с кошки.Ниже я выполнил / создал шесть лучших / самых простых способов центрировать ваше меню навигации (также известные как nav, navbar, menu). Все демонстрации выполнены в небольшом стиле, однако весь код, показанный ниже, урезан до самого необходимого (то есть достаточно, чтобы сделать его центром). * {margin: 0; padding: 0;} Предполагается, что применяется ко всему приведенному ниже коду.
Посмотреть демо
Метод № 1 в основном использует маржу : auto; для центрирования навигатора. Если ваши пункты меню (li / a) имеют фиксированную ширину , то этот метод, вероятно, самый простой способ центрировать вашу навигацию.Основные фрагменты кода, используемые для центрирования навигационной панели, выделены жирным шрифтом.
CSS
#nav { ширина: 750 пикселей; маржа: 0 авто; стиль списка: нет; } #nav li { плыть налево; } #nav a { дисплей: блок; выравнивание текста: центр; ширина: 150 пикселей; / * фиксированная ширина * / текстовое оформление: нет; }
HTML
Посмотреть демо
Метод 2 в основном использует position: absolute; для центрирования навигатора.На самом деле я никогда не центрировал меню таким образом, но, если ваши пункты меню (li / a) имеют фиксированную ширину , то это довольно простой способ центрировать вашу навигацию. Основные фрагменты кода, используемые для центрирования навигационной панели, выделены жирным шрифтом.
CSS
div { позиция: относительная; } #nav { позиция: абсолютная; слева: 50%; вверху: 0; маржа слева: -375 пикселей; / * отрицательное поле равное половине ширины * / ширина: 750 пикселей; стиль списка: нет; } #nav li { плыть налево; } #nav a { дисплей: блок; выравнивание текста: центр; ширина: 150 пикселей; / * фиксированная ширина * / текстовое оформление: нет; }
HTML
Посмотреть демо
Метод № 3 в основном использует text-align: center; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину , и вам НЕ нужна среда блока отображения для li / a, то это самый простой способ центрировать навигацию. Основные фрагменты кода, используемые для центрирования навигационной панели, выделены жирным шрифтом.
CSS
#nav { выравнивание текста: по центру; } #nav li { дисплей: встроенный; } #nav a { текстовое оформление: нет; отступ: 0 30 пикселей; / * переменная ширина * / }
HTML
Посмотреть демо
Метод № 4 в основном использует display: inline-block; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину и вам НЕОБХОДИМО окружение блока отображения для li / a, то это, вероятно, будет для вас самым простым способом центрировать навигацию. IE6 / 7 — единственные, кому нужна небольшая помощь (как показано ниже).
CSS
#nav { выравнивание текста: по центру; } #nav ul { дисплей: встроенный блок; стиль списка: нет; } * html #nav ul {/ * Целевой IE6 * / дисплей: встроенный; } * + html #nav ul {/ * Целевой IE7 * / дисплей: встроенный; } #nav li { дисплей: встроенный; } #nav a { плыть налево; текстовое оформление: нет; отступ: 0 30 пикселей; / * переменная ширина * / }
HTML
Посмотреть демо
Метод № 5 в основном использует position: relative; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину , и вам НЕОБХОДИМО окружение блока отображения для li / a, и / или вы хотите центрировать «плавающий элемент без ширины», то это еще один простой способ центрируйте свой навигатор. Опять же, IE6 / 7 — единственные, кому нужна небольшая помощь (как показано ниже).
CSS
#заворачивать { переполнение: скрыто; положение: относительное; / * IE7 это необходимо * / } #nav { плыть налево; позиция: относительная; осталось: 50%; } #nav ul { плыть налево; / * IE6 это необходимо * / позиция: относительная; осталось: -50%; стиль списка: нет; } #nav li { плыть налево; } #nav a { плыть налево; текстовое оформление: нет; отступ: 0 30 пикселей; / * переменная ширина * / }
HTML
Посмотреть демо
Метод № 6 в основном использует display: table; для центрирования навигатора.Если ваши пункты меню (li / a) имеют переменную ширину и вам НЕОБХОДИМО окружение блока отображения для li / a, то это еще один и последний способ центрировать вашу навигацию. И все же, опять же, IE6 / 7 — единственные, кому нужна небольшая помощь (как показано ниже).
CSS
#nav { дисплей: стол; / * центрирует современные браузеры * / маржа: 0 авто; / * центрирует современные браузеры * / выравнивание текста: по центру; / * центры IE6 / 7 * / } #nav ul { стиль списка: нет; дисплей: встроенный блок; / * У IE6 / 7 выключатель отключения * / } #nav ul { дисплей: встроенный; / * IE6 / 7 haslayout trip-switch, а IE6 / 7 должен отображать только ul в строке, но не причиняет вреда другим * / } #nav li { дисплей: встроенный; } #nav a { плыть налево; текстовое оформление: нет; отступ: 0 30 пикселей; / * переменная ширина * / }
HTML
Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.
Красивые горизонтально центрированные меню
Мэтью Джеймс Тейлор ›Веб-дизайн› Макеты ›Центрированные меню
Многим людям нужны центрированные меню на своих веб-сайтах, но новичку в CSS эта задача кажется невыполнимой.
Если вы выполните поиск в Интернете, вы найдете несколько методов центрирования, но большинство из них основаны на хаках CSS, JavaScript или нестандартных правилах CSS, которые поддерживаются не всеми браузерами.
В этом посте я собираюсь показать вам мой секретный метод создания центрированных вкладок, который не использует никаких CSS-хаков и будет работать во всех распространенных веб-браузерах вплоть до IE 5.5!
Он также совместим с моими идеальными жидкими раскладками.
Начнем с базового примера, а затем я объясню, как это работает.
Базовый пример центрированного меню
Ниже вы должны увидеть четыре горизонтально центрированных вкладки в этом столбце текста, вторая вкладка установлена как активная. Попробуйте изменить размер окна браузера и размер текста страницы, чтобы увидеть, как меню всегда остаются по центру и доступны для нажатия.
См. Еще несколько примеров расширенного центрированного меню CSS
Центрированное меню HTML
HTML, используемый для центрированных меню, семантически структурирован и очень прост.Структура — это просто список ссылок в одном блоке div.
Центрированное меню CSS
Ниже приведен CSS, используемый для центрирования вкладок на странице.См. Ниже объяснение того, как это работает.
#centeredmenu {
плыть налево;
ширина: 100%;
фон: #fff;
нижняя граница: твердое тело 4px # 000;
переполнение: скрыто;
положение: относительное;
}
#centeredmenu ul {
ясно: слева;
плыть налево;
стиль списка: нет;
маржа: 0;
отступ: 0;
положение: относительное;
осталось: 50%;
выравнивание текста: центр;
}
#centeredmenu ul li {
дисплей: блок;
плыть налево;
стиль списка: нет;
маржа: 0;
отступ: 0;
положение: относительное;
справа: 50%;
}
#centeredmenu ul li a {
дисплей: блок;
маржа: 0 0 0 1px;
отступ: 3px 10px;
фон: #ddd;
цвет: # 000;
текстовое оформление: нет;
высота строки: 1.3em;
}
#centeredmenu ul li a: hover {
фон: # 369;
цвет: #fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active: hover {
цвет: #fff;
фон: # 000;
font-weight: жирный;
}
Как работает метод центрирования
Уловка моего метода центрирования заключается в том, как плавающие элементы относительно друг друга расположены. Чтобы объяснить это правильно, позвольте мне сначала описать, как элемент может изменять свои размеры при перемещении.
Не плавающий div
Вот div (элемент уровня блока), который не является плавающим. Обратите внимание, как он растягивается до 100% ширины содержащего его элемента, в данном случае до всей страницы.
Левый плавающий div
Если теперь мы переместим div влево, он автоматически сожмется, чтобы соответствовать ширине содержимого внутри себя. Теперь его ширина равна ширине текста «Div». Это сжатие является ключом к процессу центрирования, оно помогает нам переместить наше меню на нужную величину в центр.
Стандартное меню с выравниванием по левому краю
Давайте воспользуемся традиционным меню с выравниванием по левому краю и шаг за шагом переместим вкладки в центр. Я покрасил каждый элемент в другой цвет, чтобы было легко увидеть, как все они вложены друг в друга.
Обратите внимание на следующее.
- Блок div ‘centeredmenu’ (синий прямоугольник) перемещается влево, но мы задаем ему ширину 100%, чтобы он оставался растянутым по всей странице.
- Элемент ul (розовая рамка) находится внутри div ‘centeredmenu’ и перемещается влево.Это означает, что ul будет уменьшаться до ширины своего содержимого, как раз так получилось, что это ширина всех вкладок.
- Все элементы li (зеленые прямоугольники) находятся внутри ul, и каждый перемещается влево. Это заставляет их сжиматься вокруг ссылки внутри себя, и все они выстраиваются в горизонтальный ряд.
- Внутри каждой ссылки (оранжевое поле) находится текст, который появляется на вкладке; Вкладка 1, вкладка 2 и т. Д.
Сдвиг позиции неупорядоченного списка
Затем мы смещаем элемент ul вправо на 50%, используя значение position: relative;
.При перемещении элемента в сторону на процент таким образом важно отметить, что он будет перемещать процент от его , содержащий ширину элемента , а не своей собственной ширины. Таким образом, в этом случае элемент ul переместится вправо на 50% ширины div ‘centeredmenu’ — это половина окна браузера. Конечным результатом является то, что наши меню начинаются с середины экрана и частично выходят за пределы страницы вправо, но не волнуйтесь, еще на одном шаге они будут в центре.
Сдвиг позиции всех позиций
Последний шаг — сдвинуть все элементы li назад влево на 50%. Это 50% ширины элемента ul (содержащего его элемента), и он поместит вкладки точно в центр окна.
Некоторые важные примечания
Этот метод центрирования меню надежен, но есть несколько вещей, о которых вы должны знать.
- Поскольку элемент ul частично находится за пределами страницы, окно браузера будет прокручиваться в сторону, если вы не добавите
overflow: hidden;
правило для div ‘centermenu’.Это отрубит нависающий 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
Mac
Окна
- Firefox 2+
- Safari
- Opera
- Google Chrome
- Internet Explorer 5.5 и выше.
Не забудьте просмотреть более сложные примеры центрированных вкладок, чтобы увидеть, что можно сделать.
Если вы хотите добавить раскрывающиеся меню, то я тоже вам помог.
Обновлено: 26 июля 2008 г.
Первая публикация: 27 июля 2008 г.
Как создать центрированное горизонтальное меню навигации с помощью простого CSS
Размещено: 17 мая, 2016
Автор: Мик Шерри
В этом простом руководстве по CSS мы создадим центрированное горизонтальное меню навигации.
Использование CSS может быть непростым делом, если вы сначала не определите фиксированную ширину для элементов списка… Дело в том, что никто не захочет объявлять элемент фиксированной ширины, если в этом нет необходимости.
В мире адаптивного веб-дизайна обычно рекомендуется избегать установки фиксированной ширины для элемента (если вы можете этого избежать), потому что это обычно означает, что элемент будет иметь большую гибкость, когда дело доходит до отображения на всех размерах устройств и будет более удобным, если веб-мастер использует CMS.
Еще одна причина, по которой мне нравится эта техника, заключается в том, что я считаю симметрию очень привлекательной в веб-дизайне. При работе с моими веб-дизайнами золотого берега я часто прибегаю к тому, чтобы пункты меню располагались равномерно и по центру, если это помогает создать симметрию и дополняет общий макет.
Для начала, наша стандартная разметка меню:
Теперь базовый CSS для получения нашего горизонтального меню навигации:
nav ul {
тип-стиль-список: нет;
маржа: 0;
отступ: 0;
}
nav li {
дисплей: встроенный;
}
nav li a {
отступ: 5 пикселей 10 пикселей;
}
Как вы можете видеть ниже, у нас очень простое (и очень ванильное) горизонтальное меню навигации.
Поскольку элементы списка отображаются как встроенные, теперь они располагаются горизонтально и выровнены по левому краю
Теперь нам нужно добавить только 2 дополнительных свойства CSS, чтобы элементы меню привязывались к центру контейнера (выделено жирным шрифтом).
nav ul {
тип-стиль-список: нет;
маржа: 0;
отступ: 0;
выравнивание текста: по центру;
}
nav li {
дисплей: встроенный;
}
nav li a {
отступ: 5 пикселей 10 пикселей;
дисплей: строчно-блочный;
}
Результат:
Как видите, с двумя небольшими изменениями в CSS легко создать удобную центрированную горизонтальную навигацию без необходимости устанавливать какую-либо фиксированную ширину, а полностью совместим с IE8 и выше.
Если вы хотите увидеть приведенный выше код в действии, посетите отзывчивый jsfiddle iframe здесь.
Как переместить элементы на панели навигации в центр — HTML и CSS — Форумы SitePoint
ransysaurimas:Когда я изменил все элементы на элементы списка на панели навигации, логотип теперь находится сверху, но не в одной строке с другими кнопками. Не знаю почему.
Ваш первый логотип будет рядом с текстом в навигационной панели теперь, когда он находится внутри элемента списка display: inline-block.Вам нужно будет установить элементы списка на vertical-align: middle, если вы хотите, чтобы середина изображения была выровнена с текстом…
например
nav ul li {
стиль списка: нет;
маржа: 1%;
размер шрифта: 2em;
дисплей: встроенный блок;
вертикальное выравнивание: по центру;
}
Вам также необходимо удалить ширину: 10%, которую вы применили к изображению, поскольку в этом случае это ерунда. Если у вас очень большое изображение, и вы уменьшаете его в 10 раз, то для начала вам будет лучше с меньшего изображения.Так как я не могу видеть ваше изображение, могу только догадываться, что вы с ними делаете 🙂
Изображение в социальной сети находится на своем месте и будет находиться на том месте, где вы его разместили. Если вы не хотите, чтобы он там был, поместите его в другое место, но обратите внимание, что абсолютные элементы размещаются по отношению к ближайшему позиционированному предку (если его нет, то они размещаются по отношению к корневому элементу (фактически, начальному окну просмотра)).
ransysaurimas:Причина, по которой я использовал высоту, заключается в том, что я хотел использовать несколько разных изображений в качестве фона при прокрутке страницы вниз
Все зависит от того, как это структурировано, но обычно содержимое контролирует высоту div.Если у вас нет (или мало) контента, вы просто собираетесь показать большое фоновое изображение?
Нам, вероятно, потребуется увидеть макет дизайна, чтобы понять, чего вы пытаетесь достичь.
Я также предлагаю вам зарегистрировать бесплатную учетную запись codepen и разместить свои демонстрации в Интернете, чтобы мы могли видеть фактический код, который вы используете по мере развития сайта.
Наконец, это может быть уместно, если вы, возможно, пройдете курс или два по основам html и css во время практики, поскольку многие из этих проблем, с которыми вы сталкиваетесь, будут рассмотрены в первых нескольких уроках.Вы обнаружите, что прогрессируете намного лучше, если разберетесь с некоторыми концепциями. CSS не сложен (базовый CSS), но в нем есть правила и методы, которые необходимо понять, прежде чем вы сможете прогрессировать.
ransysaurimas:Еще одна проблема, с которой я столкнулся, заключается в том, что при прокрутке вниз другие элементы, такие как «HAYQ» или «Армянские специальные предложения», перекрываются на панели навигации. Я бы хотел это исправить.
Ваша навигационная система имеет фиксированное положение, что означает, что она больше не участвует в потоке документа и будет располагаться поверх всего на пути.Фиксированное позиционирование трудно контролировать даже тем, кто разбирается в css, и его лучше избегать. Это нормально для верхних или нижних колонтитулов с фиксированной высотой с одним или двумя словами, но как только в них есть несколько текстовых элементов, становится почти невозможно их разместить в гибком макете. Вероятно, вам лучше взглянуть на липкий заголовок, который обычно достигается с помощью JS (хотя некоторые браузеры поддерживают position: sticky).
В настоящее время вы можете добавить верхний отступ к элементу body, чтобы ваш контент начинался ниже фиксированного заголовка.
например
корпус {padding-top: 5em}
Однако 5em пахнет «магическими числами», и вам нужно будет следить за высотой вашего заголовка, потому что, если ваш текст переносится на другую строку, содержимое снова будет перекрываться. Вы можете сделать это с помощью медиа-запросов и увеличить заполнение или уменьшить размер содержимого. Хотя все это очень утомительно.
Как выровнять меню Divi по правому, левому или центру
Как выровнять меню Divi по правому, левому или по центруЭтот быстрый совет по Divi Pro устранит путаницу и покажет, как выровнять модуль меню в Divi Theme Builder по правому, левому или центру.
Мы что-то упускаем?
Поиск правильной настройки меню Divi
Когда Divi Theme Builder был выпущен вместе с Divi 4.0, он принес с собой новый модуль меню. Это отличный новый модуль с большим потенциалом, но он также внес некоторую путаницу. Старое стандартное меню было выровнено по правому краю по умолчанию, но новый модуль меню по умолчанию выровнено по левому краю.Странно, правда?
Многие люди начали спрашивать об этом в группах Facebook, и многие были сбиты с толку и расстроены. Но ответ довольно прост — параметры выравнивания есть прямо в настройках модуля, они просто не там, где вы ожидаете.
Как выровнять текст меню Divi
Переключатель макета
Когда вы откроете модуль меню на вкладке «Дизайн», вы заметите, что стиль меню имеет три варианта:
- Выровнен по левому краю
- по центру
- Встроенный центрированный логотип
Это, конечно, сбивает с толку.В поле «Выровнено по левому краю» должно быть написано что-то вроде «По умолчанию» или «Пользовательский», поэтому я не знаю, как это ускользнуло. Оставьте этот параметр на этом уровне или, если он был у вас на другом, установите его обратно на «Выровнено по левому краю» , чтобы это сработало.
Переключатель текста меню
Ответ — перейти к следующему переключателю, переключателю «Текст меню». Оказавшись там, прокрутите вниз, и вы найдете типичные параметры выравнивания текста, которые у нас есть для любого другого типа текста.
Как видите, здесь есть варианты для левого, центрального, правого и выровненного текста.Изменение этого выравнивает весь текст меню Divi, и это скрытое решение в противном случае загадочной ситуации.
73Последнее обновление: 7 июл.2021 в 15:40
Вот и все!
Надеюсь, вам понравилось узнать, как выровнять модуль меню Divi Theme Builder по правому, левому или по центру. Поделитесь своими мыслями в комментариях ниже. Если вы найдете ценность в этом типе сообщений, , пожалуйста, подпишитесь на , потому что у нас есть тонны обучающих программ, которые будут опубликованы !Каждый месяц мы рассылаем информационный бюллетень по электронной почте с последними учебными материалами, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями.Иногда мы отправляем дополнительные отдельные электронные письма здесь и там, если нам просто не терпится! Вот что вы получите, если подпишетесь, и вы всегда можете отказаться от подписки в любое время, если просто не можете больше это терпеть
Нельсон — владелец компании Pee-Aye Creative Co в прекрасном штате Пенсильвания. Он любит помогать малому бизнесу, исследовать, создавать веб-сайты с Divi и обучать других.
Оставить отзыв!
Комментируя, вы соглашаетесь с нашей Политикой в отношении комментариев для блогов и YouTube.
Каждый месяц мы рассылаем информационный бюллетень по электронной почте с последними учебными материалами, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями.Иногда мы отправляем дополнительные отдельные электронные письма здесь и там, если нам просто не терпится! Вот что вы получите, если подпишетесь, и вы всегда можете отказаться от подписки в любое время, если просто не можете больше это терпеть
{«id»: null, «mode»: «button», «open_style»: «in_modal», «currency_code»: «USD», «currency_symbol»: «$», «currency_type»: «decimal», «blank_flag_url» «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /blank.gif «,» flag_sprite_url «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /flags.png «,» default_amount «: 500,» top_media_type «:» none «,» Feature_image_url » : false, «Feature_embed»: «», «header_media»: null, «file_download_attachment_data»: null, «recurring_options_enabled»: true, «recurring_options»: {«never»: {«selected»: true, «after_output»: «Один только время «},» еженедельно «: {» selected «: false,» after_output «:» каждую неделю «},» ежемесячно «: {» selected «: false,» after_output «:» каждый месяц «},» ежегодно » : {«selected»: false, «after_output»: «Каждый год»}}, «strings»: {«current_user_email»: «», «current_user_name»: «», «link_text»: «Оставить отзыв», «complete_payment_button_error_text «:» Проверьте информацию и попробуйте еще раз «,» payment_verb «:» Pay «,» payment_request_label «:» Pee-Aye Creative «,» form_has_an_error «:» Проверьте и исправьте ошибки выше «,» general_server_error «:» Что-то не так в настоящий момент не работает.Повторите попытку. «,» Form_title «:» Pee-Aye Creative «,» form_subtitle «: null,» currency_search_text «:» Страна или валюта здесь «,» other_payment_option «:» Другой способ оплаты «,» manage_payments_button_text «:» Управление ваши платежи «,» thank_you_message «:» Спасибо за поддержку! Неделя за неделей нас поддерживают такие люди, как вы! «,» Payment_confirmation_title «:» Pee-Aye Creative «,» Receipt_title «:» Ваша квитанция «,» print_receipt «:» Распечатать квитанцию »,» email_receipt «:» Электронная почта Квитанция «,» email_receipt_sending «:» Квитанция об отправке… «,» email_receipt_success «:» Квитанция по электронной почте успешно отправлена »,» email_receipt_failed «:» Не удалось отправить квитанцию по электронной почте. Повторите попытку. «,» Receive_payee «:» Paid to «,» receive_statement_descriptor «:» Это будет отображаться в вашей выписке как «,» Receive_date «:» Date «,» receive_transaction_id «:» Transaction ID «,» Receaction_transaction_amount » : «Amount», «Refund_payer»: «Refund from», «login»: «Войдите, чтобы управлять своими платежами», «manage_payments»: «Manage Payments», «transaction_title»: «Your Transactions», «transaction_title»: » Квитанция о транзакции «,» transaction_period «:» Период действия плана «,» scheme_title «:» Ваши планы «,» scheme_title «:» Управление планом «,» scheme_details «:» Сведения о плане «,» scheme_id_title «:» Идентификатор плана «,» scheme_payment_method_title «:» Способ оплаты «,» scheme_amount_title «:« Сумма плана »,« scheme_renewal_title »:« Дата следующего продления »,« scheme_action_cancel »:« Отмена плана »,« scheme_action_cant_cancel »:« Отмена в настоящее время недоступна.»,» scheme_action_cancel_double «:» Вы уверены, что хотите отменить? «,» scheme_cancelling «:» Отмена плана … «,» scheme_cancelled «:» План отменен «,» scheme_failed_to_cancel «:» Не удалось отменить план » , «back_to_plans»: «\ u2190 Вернуться к планам», «update_payment_method_verb»: «Обновление», «sca_auth_description»: «У вас есть ожидающий платеж за продление, требующий авторизации.», «sca_auth_verb»: «Авторизовать платеж за продление», «sca_authing_verb «:» Авторизация платежа «,» sca_authed_verb «:» Платеж успешно авторизован! «,» Sca_auth_failed «:» Авторизация невозможна! Пожалуйста, попробуйте еще раз.»,» login_button_text «:» Войти «,» login_form_has_an_error «:» Пожалуйста, проверьте и исправьте ошибки выше «,» uppercase_search «:» Search «,» lowercase_search «:» search «,» uppercase_page «:» Page «,» lowercase_page «:» page «,» uppercase_items «:» Items «,» lowercase_items «:» items «,» uppercase_per «:» Per «,» lowercase_per «:» per «,» uppercase_of «:» Of «,» lowercase_of » : «of», «back»: «Вернуться к планам», «zip_code_placeholder»: «Zip \ / Почтовый индекс», «download_file_button_text»: «Загрузить файл», «input_field_instructions»: {«tip_amount»: {«placeholder_text»: «Сколько бы вы хотели дать чаевых?», «Initial»: {«struction_type »:« normal », «struction_message»: «Сколько вы бы хотели дать чаевые? Выбирайте любую валюту.»},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Сколько вы хотите дать чаевые? Выберите любую валюту. «},» Invalid_curency «: {«struction_type»: «error», «struction_message «:» Выберите допустимую валюту. «}},» Повторяющийся «: {» placeholder_text «:» Повторяющийся «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Как часто вы хотели бы это делать? «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Как часто вы будете хотите дать это? «},» empty «: {«struction_type»: «error», «struction_message «:» Как часто вы хотели бы это делать? «}},» name «: {» placeholder_text «:» Имя по кредитной карте «,» начальная «: {» инструкция_типа «:» обычная «,» инструкция_сообщение «:» Введите имя, указанное на вашей карте.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Введите имя на вашей карте. «},» пустой «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Пожалуйста введите имя на своей карточке. «}},» privacy_policy «: {» terms_title «:» Условия использования «,» terms_body «: null,» terms_show_text «:» Просмотреть условия «,» terms_hide_text «:» Скрыть условия «, «начальный»: {«тип_инструкции»: «нормальный», «сообщение_инструкции»: «я согласен с условиями.»}, «не отмечен»: {«тип_ инструкции»: «ошибка», «сообщение_инструкции»: «пожалуйста, примите условия .»},» проверено «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Я согласен с условиями. «}},» электронная почта «: {» текст-заполнителя «:» Ваш адрес электронной почты «,» начальный «: {«тип_инструкции»: «нормальный», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «пусто»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «не_адрес_почты_почты»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Убедитесь, что вы ввели действительный адрес электронной почты»} }, «note_with_tip»: {«placeholder_text»: «Ваша заметка здесь… «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Прикрепите примечание к своей подсказке (необязательно) «},» пусто «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции » : «Прикрепите примечание к совету (необязательно)»}, «not_empty_initial»: {«struction_type «:» normal «, «struction_message»: «Приложите примечание к совету (необязательно)»}, «save»: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Сохранение примечания … «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Примечание успешно сохранено! «},» ошибка «: { «тип_инструкции»: «ошибка», «сообщение_инструкции»: «Невозможно сохранить примечание примечания в это время.Повторите попытку. «}},» Email_for_login_code «: {» placeholder_text «:» Ваш адрес электронной почты «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите свой адрес электронной почты для входа. «} , «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите адрес электронной почты для входа.»}, «пустой»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите адрес электронной почты для входа. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите адрес электронной почты, чтобы войти в систему. «}},» login_code «: {» initial «: {«struction_type»: «normal», «struction_message «:» Проверьте свою электронную почту и введите код для входа.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Проверьте свою электронную почту и введите код входа. «},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «: «Проверьте свою электронную почту и введите код входа.»}, «Empty»: {«struction_type «:» error «, «struction_message»: «Проверьте свою электронную почту и введите код входа.»}}, «Stripe_all_in_one»: {» initial «: {«struction_type»: «normal», «struction_message «:» Введите здесь данные вашей кредитной карты. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите данные вашей кредитной карты здесь.»},» успех «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Введите здесь данные своей кредитной карты. «},» недопустимое_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» номер карты не является действительным номером кредитной карты. «},» invalid_expiry_month «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_expiry_year «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_cvc «: {» command_type «:» error «, «struction_message»: «Код безопасности карты недействителен.»},» неверное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Неверный номер карты. «},» неполное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» карточка номер неполный. «},» неполный_cvc «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» код безопасности карты неполный. «},» неполное_экспири «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты неполный. «},» Incomplete_zip «: {» command_type «:» error «, «struction_message»: «Почтовый индекс карты не указан.»},» expired_card «: {» statement_type «:» error «, «struction_message»: «Срок действия карты истек.»}, «invalid_cvc»: {«struction_type «:» error «, «struction_message»: «Безопасность карты неверный код. «},» неверный_zip «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Не удалось проверить почтовый индекс карты. «},» недействительный_expiry_year_past «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты истек «},» card_declined «: {«struction_type»: «error», «struction_message «:» Карта отклонена.»},» Отсутствует «: {» Тип_инструкции «:» ошибка «,» Сообщение_инструкции «:» У клиента нет карты, с которой производится оплата. «},» Ошибка_работки «: {» Тип_инструкции «:» ошибка «,» инструкция_message «:» Произошла ошибка при обработке карты. «},» invalid_request_error «: {» statement_type «:» error «, «struction_message»: «Невозможно обработать этот платеж, попробуйте еще раз или используйте альтернативный метод.»}, «invalid_sofort_country»: {«struction_type «:» error «, «struction_message»: «SOFORT не принимает страну выставления счета.Попробуйте другую страну. «}}}},» Fetched_oembed_html «: false}
{» date_format «:» F j, Y «,» time_format «:» g: ia «,» wordpress_permalink_only «:» https: \ / \ /www.peeayecreative.com \ / how-to-align-the-divi-theme-builder-menu-module-to-right-left-or-center \ / «,» all_default_visual_states «:» наследовать «, «modal_visual_state» ложь «user_is_logged_in» ложь «stripe_api_key»: «pk_live_51EARn4E3j6GcARDR3oo6L91XPb3rfnNl9j6ieomgjlZjVvj7nCzKCTphxwu38s20syRaBKveuT5NFmm4fZqUHOPe00fugbEkRD», «stripe_account_country_code»: «США», «setup_link»: «HTTPS: \ / \ / WWW.peeayecreative.com \ / wp-admin \ /admin.php? page = tip-jar-wp & mpwpadmin1 = welcome & mpwpadmin_lightbox = do_wizard_health_check «,» close_button_url «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / плагины \ / tip-jar-wp \ / \ / assets \ / images \ /closebtn.png «}
Пункты меню центрирования — Max Mega Menu
Для центрирования пунктов меню в строке меню :
- Перейдите в Мега-меню > Темы меню.
- Установите «Пункты меню выровнять по центру»
Выравнивание текста можно настроить для различных уровней (верхний уровень, второй и третий уровень в мегаменю, всплывающие меню) в редакторе тем:
- Перейдите в Мега-меню > Темы меню .
- Выберите тему меню и прокрутите вниз. Введите следующее в область Custom Styling:
.@include mobile { / * Центрировать пункты меню верхнего уровня * / # {$ wrap} # {$ menu}> li.mega-menu-item> a.mega-menu-link { выравнивание текста: центр; } / * Центрировать элементы второго и третьего уровня в мегаменю * / # {$ wrap} # {$ menu}> li.mega-menu-megamenu> ul.mega-sub-menu> li.mega-menu-item> a.мега-меню-ссылка, # {$ wrap} # {$ menu}> li.mega-menu-megamenu> ul.mega-sub-menu li.mega-menu-column> ul.mega-sub-menu> li.mega-menu-item> a.mega-menu-link, # {$ wrap} # {$ menu}> li.mega-menu-megamenu> ul.mega-sub-menu> li.mega-menu-item li.mega-menu-item> a.mega-menu-link, # {$ wrap} # {$ menu}> li.mega-menu-megamenu> ul.mega-sub-menu li.mega-menu-column> ul.mega-sub-menu> li.mega-menu-item li .mega-menu-item> a.mega-menu-link { выравнивание текста: центр; } / * Центрировать элементы всплывающего меню * / # {$ wrap} # {$ menu}> li.всплывающее-мега-меню ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { выравнивание текста: центр; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
140002
13
14
18
19
@include mobile {
/ * Центрировать пункты меню верхнего уровня * /
# {$ wrap} # {$ menu}> li.элемент-мега-меню> ссылка-мега-меню {
выравнивание текста: по центру;
}
/ * Центрировать элементы второго и третьего уровня в мегаменю * /
# {$ wrap} # {$ menu}> li.