Как выровнять по центру блок в CSS?
Пусть у нас есть элемент div, внутри которого есть другой div:
Рассмотрим различные способы выравнивания внутреннего блока по центру внешнего в зависимости от исходных данных.
Как выровнять блок по горизонтали?
1. Выравнивание по горизонтали при помощи фиксированных отступов
Если у внутреннего и внешнего блока известна ширина, то для внутреннего блока можно вычислить отступы по формуле:
(ширина_внешнего_блока — ширина_внутреннего_блока) / 2
И указать в стилях конкретные значения:
.box < width: 1000px; >.box-content < width: 500px; margin-left: 250px; /* отступ справа вычисляется сам */ >
То же самое возможно использовать и с процентами, ширина внешнего блока при этом принимается за 100%: например, ширина внутреннего блока 60%, значит размер отступов будет равен 20%:
.box-content
Если же у внутреннего блока известны размеры отступов, а ширина неизвестна, то достаточно будет указать только отступы, но уже не только слева, а с обеих сторон. В этом случае ширина блока будет вычислена по отступам:
.box-content
2. Горизонтальное выравнивание при помощи произвольных отступов
Если внутренний блок имеет фиксированную ширину, то чтобы его отцентрировать по горизонтали, достаточно указать отступы справа и слева как auto:
.box-content
Если вложенный элемент .box-content является строчным (img, a, span и др.), то для него понадобится указать display:
.box-content
3. Использование text-align у внешнего блока
text-align также позволяет выполнить выравнивание по горизонтали, в первую очередь он используется для текста.
Например, в данном случае:
Какой-то текст
Выравнивания по центру можно достичь, указав text-align для .text-box :
.text-box
4. Горизонтальное выравнивание блока при помощи абсолютного позиционирования
Если у внутреннего блока известна ширина, то можно отцентрировать его по горизонтали при помощи абсолютного позиционирования. В этом случае необходимо сдвинуть блок влево на половину его ширины, чтобы он действительно оказался по центру:
.box < position: relative; >.box-content
Как выровнять блок по вертикали?
1. Выравнивание текста из 1 строки по вертикали
Если есть блок, в котором размещен текст, занимающий не больше 1 строки (например, кнопка или пункт меню) и известна высота этого блока, то можно задать line-height , равный этой высоте.
Например, для такой структуры:
Пункт меню
Выравнивание по вертикали будет выглядеть следующим образом:
.menu-item
2. Вертикальное выравнивание блока при помощи абсолютного позиционирования
Вертикальное выравнивание блока делается по аналогии с горизонтальным, однако здесь вместо ширины внутреннего блока нужно знать его высоту, а отступы указывать не слева, а сверху.
.box < position: relative; >.box-content
Также можно указать позиции со всех сторон, равные 0, если известны ширина и высота блока, и такой вариант также будет работать:
.box < position: relative; >.box-content
3. Табличное выравнивание по вертикали
Как известно, в таблицах работает vertical-align для выравнивания их контента по высоте.
Какие-то данные
Если использовать display: table в стилях, то возможно добиться того же:
.table < display: table; width: 100%; >.table-row
4. Вертикальное выравнивание при помощи CSS3-трансформации
CSS3 позволяет выполнять выравнивание буз необходимости добавления внешних блоков. Достаточно иметь один блок:
Какие-то данные
Стили для него будут выглядеть следующим образом, если у него известны высота и ширина:
Если же размеры блока неизвестны, то внешний блок становится нужен:
Какие-то данные
И стили определяются так:
.box-content
Поделиться статьей «Как выровнять по центру блок в CSS?»
Выровнять меню по центру по горизонтали и убрать list style
так выглядит при тесте:
Отслеживать
34k 25 25 золотых знаков 130 130 серебряных знаков 222 222 бронзовых знака
задан 27 авг 2015 в 3:41
13 1 1 золотой знак 1 1 серебряный знак 3 3 бронзовых знака
Немного отредактировал ответ, надеюсь что смысл сохранил.
27 авг 2015 в 6:42
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
27 авг 2015 в 12:56
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
#nav < background: #345; position: fixed; left: 0; top: 0; width: 100%; height:50px; text-align: center; display: inline; vertical-align:middle; >#nav a < text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 19px; color:#FFF; padding: 5px; >#nav a:hover < background: #FFF; color: #345; >ul < margin: 0; padding: 12px; list-style: none; >li
Отслеживать
ответ дан 27 авг 2015 в 7:11
Узбек Баха Узбек Баха
2,558 4 4 золотых знака 20 20 серебряных знаков 45 45 бронзовых знаков
спасибо, почти то что нужно) как сделать фон на всю ширину, а не только на кнопки?
27 авг 2015 в 17:55
@Valeryyy обновил ответ
1 сен 2015 в 11:23
#nav < display: block; position: relative; >#nav ul < width:300px; margin:0 auto; display:block; >#nav ul li a < background-color: #FFF; text-align: left; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000; >#nav ul li
Отслеживать
ответ дан 27 авг 2015 в 6:56
Aslan Kussein Aslan Kussein
1,776 2 2 золотых знака 14 14 серебряных знаков 35 35 бронзовых знаков
- html
- css
- меню
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Осваиваем CSS: выравнивание по центру
Использование CSS является наиболее оптимальным способом центрирования изображений, блоков текста и даже всего дизайна веб-страницы. Большинство свойств для HTML align стали доступны в CSS , начиная с версии 1.0 . Они отлично работают с CSS3 и современными веб-браузерами:
Обновлено: 2021-07-14 19:24:03 МЛ Мария Логутенко автор материала
Применение CSS — выравнивание по центру HTML
Центрирование с помощью CSS может стать проблемой для начинающих веб-дизайнеров. Существует много способов сделать это, но не все они применимы к каждому элементу.
CSS можно использовать, чтобы:
- Центрировать текст;
- Центрировать блочный элемент ( например, div );
- Центрировать изображение;
- Вертикально центрировать блок или изображение.
Много лет назад веб-дизайнеры могли использовать для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.
Советы по центрированию с помощью CSS
HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.
Выравнивание текста по центру CSS
Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align :
p.center
С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.
Применения этого класса:
This text is centered.
При выравнивании текста по центру при помощи свойства text-align помните, что он будет центрирован внутри содержащего его контейнера, и необязательно относительно всей страницы.
Выровнять по центру CSS блоки контента
Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью .
Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto :
div.center
Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение 0 , а левый и правый отступы будут использовать значение auto . Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align .
Применение в HTML:
This entire block is centered, but the text inside it is left aligned.
Поскольку блок имеет определенную ширину, он будет центрирован внутри содержащего его элемента. Текст, находящийся в этом блоке, будет выровнен не по центру, а по левому краю. Так как по умолчанию в браузерах текст выравнивается по левому краю. Чтобы выровнять по центру текст, используйте свойство text-align , которое мы описывали ранее.
Как выровнять картинку по центру в HTML
Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align . Но не стоит полагаться на этот метод, так как он не рекомендован W3C .
Но как выровнять картинку по центру CSS? Для этого следует явно указать браузеру, что изображение является элементом уровня блока. Вот код CSS для этого:
img.center
Вот HTML код для изображения, которое нужно центрировать:
Также можно центрировать объекты с помощью встроенного CSS :
Вертикальное центрирование элементов
HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3 , появилось решение для этой задачи.
Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle :
.vcenter
Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox . Если есть проблемы с более ранними версиями браузеров, W3C рекомендует центрировать текст вертикально в контейнере, используя следующий метод:
- Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div ;
- Задайте минимальную высоту элементу-контейнеру;
- Объявите элемент-контейнер;
- Установите для HTML vertical align значение middle .
.vcenter
This text is vertically centered in the box.
Вертикальное центрирование и ранние версии Internet Explorer
Существует несколько способов заставить IE центрировать объекты, а затем воспользоваться условными комментариями. Хорошая новость заключается в том, что в связи с недавним решением Microsoft отказаться от поддержки старых версий IE эти браузеры должны скоро исчезнуть, тем самым облегчив для веб-дизайнеров использование таких современных подходов к разметке как CSS FlexBox .
МЛ Мария Логутенко автор-переводчик статьи « Use CSS to Center Images and Other HTML Objects »
Как сделать меню по центру?
чтобы работал марджин, нужна адекватная ширина у родителя. в данном примере у блока ul ширина 1000 пикселей, хотя его реальная ширина — 550. попробуйте изменить и посмотрите на результат. кроме того нужно очистить потом (clearfix, например), чтобы размеры ul считались правильно.
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Меню центрируется, просто у Вас указана ширина в 1000px, а количество элементов списка не набирается на эту ширину и они выравниваются по левому краю и тут возникает «оптический обман» ).
1) Стилизовать .main-menu (указав, например, ему фон)
2) Выровнять элементы списка относительно родителя
.main-menu < width: 1000px; list-style: none; padding: 0; font-size: 24px; margin: 0 auto; text-align: center; >.main-menu li
3) Либо подогнать ширину .main-menu под сумму width всех элементов списка.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
SirMustache @SirMustache
Еще можно задать
.main-menu
и перенести значение в
.main-menu li < font-size: 24px;>
чтобы убрать отступы между inline элементами.
Или отрицательный margin.
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Почему фоновая картинка то пропадает, то появляется?
- 1 подписчик
- 34 минуты назад
- 15 просмотров