Как отцентрировать inline block

Выровнять текст по центру (по вертикали) у div с display: inline-block

Выровнять текст по центру (по вертикали) у div с display: inline-block . При использовании vertical-align меняется положение самого блока. Возможно ли это сделать без обертывания текста в

?

Отслеживать
задан 29 дек 2017 в 20:08
user272575 user272575

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

div < width: 100px; height: 100px; padding: 5px; display: inline-block; vertical-align: top; border: 1px solid #f00; text-align: center; >div:after

text

Отслеживать
ответ дан 29 дек 2017 в 20:27
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

Мой любимый костыль, сам пользуюсь

 .div-table < display: table; width: 100%; height: 100%; >.div-table-cell 

В любой нужный элемент вписывается div-table, в него div-table-cell, и вот в него уже всё, что нужно разместить по центру по вертикали

 
 
 
. что угодно, не только текст
 
 

Отслеживать
ответ дан 29 дек 2017 в 20:20
71 1 1 серебряный знак 6 6 бронзовых знаков
Не самый лучший вариант тк тут меняется тип элемента.
– user272575
29 дек 2017 в 20:55

Оно применяется только к строчным элементам inline или строчным блокам inline-block. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Центрирование в CSS: полное руководство

Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.

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

Мне нужно отцентрировать элемент…

По горизонтали

Является ли элемент строчным или строчно-* (как текст или ссылки)?

Строчные элементы внутри родительского блочного можно центрировать так:

.center-children < text-align: center; > 

Это сработает для элементов с типом отображения inline , inline-block , inline-table , inline-flex и т.д.

Является ли элемент блочным?

Блочный элемент можно центрировать, указав для margin-left и margin-right значение auto (а также прописав для него конкретный width , иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрировании). Для этого часто используют сокращённую запись:

.center-me < margin: 0 auto; > 

Способ работает независимо от ширины центрируемого блочного элемента и его родителя.

Обратите внимание, что заставить элемент плавать по центру с помощью float нельзя. Хотя есть одна хитрость.

Вам нужно центрировать несколько блочных элементов?

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

В том же случае, если у вас несколько блочных элементов размещены друг над другом, вполне сработает приём с автоматическими отступами:

По вертикали

С вертикальным центрированием в CSS все немного сложнее:

Это элемент строчного типа или строчно-* (как текст или гиперссылки)?

Он помещается в одну строку?

Иногда строчные/текстовые элементы могут выглядеть отцентрированными по вертикали только потому, что у них одинаковые верхнее и нижнее поля ( padding ).

.link < padding-top: 30px; padding-bottom: 30px; > 

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

.center-text-trick < height: 100px; line-height: 100px; white-space: nowrap; > 

Элемент занимает несколько строк?

Центрирование нескольких строчек текста также можно сделать с помощью установки одинаковых верхнего и нижнего полей, однако, если этот вариант вам не подходит, можно сделать элемент, в который помещён текст, ячейкой таблицы — буквально или же просто её имитацией на CSS. За центрирование в этом случае отвечает свойство vertical-align , несмотря на то, что обычно он просто выравниванивает по горизонтали элементы в ряду. (Более подробно об этом.)

Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во flex-родителе.

.flex-center-vertically < display: flex; justify-content: center; flex-direction: column; height: 400px; > 

Помните, что этот способ подходит только если у родительского контейнера указана конкретная ширина (px, % и т.д.), поэтому здесь у контейнера есть высота.

Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст выравнивается по горизонтали по этому элементу:

.ghost-center < position: relative; > .ghost-center::before < content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; > .ghost-center p < display: inline-block; vertical-align: middle; > 

Это блочный элемент?

Вам известна высота элемента?

Обычно, когда речь идёт о веб-странице, высота может быть неизвестна по многим причинам: если изменяется ширина элемента, перераспределение текста может изменить высоту. Вариации в стилизации текста могут изменить высоту. Изменение количества текста может изменить высоту элемента. Элементы с фиксированным соотношением сторон, например, изображения, могут изменить высоту при масштабировании — и так далее.

Но, если вам известна высота, вертикальное центрирование можно сделать так:

.parent < position: relative; > .child < position: absolute; top: 50%; height: 100px; margin-top: -50px; /* учитывайте поля и границы, если не используете box-sizing: border-box; */ > 

Вам неизвестна высота элемента?

Его все-таки можно центрировать, подняв вверх на половину его высоты после того, как сдвинули его наполовину вниз:

.parent < position: relative; > .child < position: absolute; top: 50%; transform: translateY(-50%); > 

Вы можете использовать flexbox?

Не удивительно, что всё это можно сделать значительно проще с помощью flexbox.

.parent < display: flex; flex-direction: column; justify-content: center; > 

И по горизонтали, и по вертикали

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

У элемента фиксированная высота и ширина?

Использование отступов с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, отцентрирует элемент внутри родителя. Кроме того, способ хорошо поддерживается браузерами:

.parent < position: relative; > .child < width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; > 

Высота и ширина элемента неизвестны?

Если вам не известны ширина или высота, для центрирования можно использовать свойство transform и отрицательное значение translate по 50% в обоих направлениях (оно вычисляется от текущей ширины/высоты элемента):

.parent < position: relative; > .child < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > 

Вы можете использовать flexbox?

Чтобы выполнить центрирование в обоих направлениях с помощью flexbox, нужно использовать два центрирующих свойства:

.parent < display: flex; justify-content: center; align-items: center; > 

Заключение

С помощью CSS вы можете отцентрировать всё что угодно.

Центрирование резинового блока по горизонтали

Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:

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

Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?

Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!

Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…

Пробуем включить мозг. Итак:

1. Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
2. Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
3. Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают float: left, но тогда он будет выровнен по левому краю и ему нужно задать отступ слева. Но я не знаю, какой будет отступ слева, потому, что он зависит от ширины кнопки!

То есть я не могу сделать ссылку строчной, потому что у нее есть высокая фоновая картинка, и не могу выровнять резиновую блочную ссылку по центру. Ни display: inline, ни display: block в этом случае не подходят. Вот если бы было так, чтобы одновременно и по центру как display: inline и с картинкой, как display: block…

А ведь именно так и можно сделать! В спецификации CSS2 у свойства display специально на этот случай есть значение inline-block, которое превращает элемент в строчный блок.

Таким образом, решением данной задачи будет следующий код:

.parent < text-align: center; >.button < display: inline-block; color: #fff; position: relative; margin: 0 auto; line-height: 32px; padding: 0px 6px 0 10px; font-size: 12px; background: url(path-to/inline-block-button.png) no-repeat; text-decoration: none; cursor: pointer; >.button span < position: absolute; width: 5px; height: 32px; right: -4px; top: 0; background: url(path-to/inline-block-button-cup.png) no-repeat; >

Такой вариант подойдет для выравнивания любого строчного элемента. Для блочных это тоже работало бы, если бы не одно мелкомягкое НО. Да, ты конечно понял, какое. Я даже не удивился — display: inline-block неправильно работает с блоками в IE6 и даже IE7.

Тем не мение, как всегда, имеется способ побороть разработки Microsoft, к тому же их же оружием. А именно, используя Microsoft свойство hasLayout!

Для того, чтобы все заработало, придется сделать элемент строчным принудительно, задав display: inline, а уже потом присвоить ему layout. В данной ситуации сделать это можно, прописав zoom: 1.

Решение нашей задачи с блочным элементом в главной роли:

 
 
 
 
Комментировать
 
 

.parent < text-align: center; >.button < position: relative; margin: 0 auto; line-height: 32px; padding: 0px 6px 0 10px; font-size: 12px; background: url(path-to/inline-block-button.png) no-repeat; text-decoration: none; cursor: pointer; display: inline-block; //display: inline; zoom: 1; >.button span < position: absolute; width: 5px; height: 32px; right: -4px; top: 0; background: url(path-to/inline-block-button-cup.png) no-repeat; >

• IE 6-8
• Firefox 3.0
• Opera 9.5-10.5
• Safari 4
• Chrome 5

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

Заметка

Также display: inline-block не работает в Firefox 2 и его эмулируют используя вендорное значение display: -moz-inline-stack. Эта информация носит скорее ознакомительный характер, потому что процент пользователей Firefox 2 падает с каждым днем и, думаю, с ним не стоит заморачиваться.

Выводы

Резиновый строчный элемент с фоном можно выровнять по центру родителя просто присвоив родителю text-align: center, а элементу display: inline-block, который превратит элемент в строчный блок.

Резиновый блочный элемент для всех нормальных браузеров выравнивается точно так же. Для IE6-7 алгоритм такой:

1. В правилах для IE6-7 сделать элемент строчным (display: inline).
2. Установить этому элементу layout.

• CSS приемы
  • «Дергание» сайта
  • background position со смещением
  • clearfix
  • CSS прозрачность
  • CSS хаки
  • RGBA — CSS полупрозрачность
  • Затемнение фона
  • Кроссбраузерный
    

    ---

  • Обнуление отступов
  • Порядок описания ссылок
  • Прелоад изображений
  • Сброс стилей
  • Сокращения в CSS
  • Убираем рамку с эл-ов в фокусе
  • Условные CSS
  • Условные комментарии
  • Поворот вокруг своей оси
  • Поворот объекта вокруг свой
  • Resize для textarea в Safari и Chrome
  • Блочная верстка форм
  • Кастомные checkbox и radio на CSS
  • Кросбраузерные input и textarea
  • Кроссбраузерный button
  • Нестандартные checkbox
  • Нестандартные radio
  • Нестандартные select
  • Нестандартные select multiple
  • Нестандартные поля выбора файла
  • Нестандартные текстовые поля
  • О кроссбраузерности placeholder
  • Отступы у checkbox и radio
  • Оформление input type=search
  • Резиновая кнопка
  • Текст в поле type=»password»
  • Блоки равной высоты в строке
  • Колонки равной высоты
  • Прижимаем подвал к низу
  • Ресайз окна: потомок перерос родителя
  • Сайт в центре экрана
  • Фиксированная колонка + резиновая + clear:both
  • CSS 3D лента
  • CSS3 всплывающие подсказки
  • IMG внутри блока — убираем странный отступ
  • IMG: меняем рисунок при наведении
  • Аккордеон на чистом CSS3
  • Валидный target=»_blank»
  • Верстка рейтингов
  • Верстка содержания
  • Вставка спецсимволов в генерируемый контент
  • Вставка стрелок
  • Индивидуальные стили для li. Избавляемся от классов.
  • Масштабируемая картинка в резиновой колонке
  • Многоколоночный текст на CSS3
  • Нестандартное подчеркивание
  • Отменяем обтекание текстом картинки
  • Оформление внешних ссылок
  • Оформление изображений по align
  • Оформляем «ol»
  • Правильные анонсы новостей
  • Список определений. Требуем невозможного.
  • Firefox
    • -moz-box-shadow и -moz-border-radius — это кошмар CPU
    • Позиционирование внутри button
    • Ширина input type=file
    • Onload в IE9
    • z-index в IE6-7
    • Баг с текстом при применении Alpha фильтра
    • Масштабирование и PIE
    • Отступы в кнопках в IE6-7
    • Проблемы с em
    • Эмуляция after и before для IE 6-7
    • Эмуляция data:URL для IE6-7 — используем MHTML-включение
    • hasLayout
    • Max-width
    • Min-height
    • Min-width
    • Min-width и max-width одновременно
    • PNG и прозрачность
    • Высота блока 1px
    • Дублирование символов
    • Дырка под футером
    • Как перекрыть select
    • Обрезка контента c отрицательным margin в IE6
    • Отступы плавающих блоков
    • Проблемы с размерами блоков
    • Псевдокласс :first-child
    • Псевдокласс hover в IE 6
    • Селектор потомков >
    • Селекторы атрибутов [type=…]
    • Сестринский селектор
    • Смещение на 1px
    • Ссылки с вложением
    • Устраняем flickering
    • Эмуляция position:fixed
    • overflow-y
    • Не подгружаются шрифты @font-face
    • Проблема с oveflow: hidden
    • Скругление img
    • HTML шаблон для мобильных устройств
    • Выпадающее меню на CSS
    • Выравнивание навигации из блоков по центру
    • Выравнивание навигации по середине
    • Резиновое меню
    • Резиновое меню из блоков
    • Убираем класс для первого элемента
    • Box-sizing: переключаем блочную модель
    • inline-block: простое свойство для непростых задач
    • Вертикальная позиция для строчного элемента
    • Вертикальное выравнивание
    • Выравнивание по центру с position: absolute
    • Вычисляемые отступы
    • Два в одном: позиция + размеры
    • Долой отступы между строчными элементами (и блоками)
    • Обходим схлопывание margin
    • Центрирование картинки в блоке
    • Центрирование резинового блока по горизонтали
    • Активация flash
    • Вставка flash в HTML
    • Вставляем ролик с YouTube
    • Как отключить flash
    • Как перекрыть flash
    • Параметры для вставки объектов
    • Ссылка на flash объекте
    • CSS треугольники
    • Аппаратное ускорение анимации
    • Встраиваем изображения — data:URL
    • Градиент: CSS3 против CSS2 + картинка
    • Лесенка спрайтов — сложный случай поклейки
    • На одну картинку меньше. Спецсимвол ×
    • Необычные тени с CSS3 box-shadow
    • Оптимизация Google Web Fonts
    • Оптимизация фонов с помощью Canvas
    • Проблемы с border-radius
    • Псевдоэлемент before для маркера списка
    • Скругление углов. Обзор методов.
    • Сокращаем HTML5 код
    • Спрайты: меньше картинок — больше скорость
    • Тень для блока
    • Фигуры с углами на CSS
    • Шаблоны градиентов
    • Дополнение Skype
    • Подключить favicon
    • Профилактика сайта: максимально простое оповещение
    • Ссылки на skype
    • @font-face в деталях
    • Cufon — нестандартный шрифт средствами JS
    • font-size: 100.01% для html
    • Безопасные шрифтовые CSS стеки для англоязычных текстов
    • Безопасные шрифтовые CSS стеки для рунета
    • Безопасные шрифты
    • Вертикальный текст
    • Используем псевдоэлемент :first-letter
    • Контур для текста
    • Нестандарный шрифт. Быть ему или нет?
    • Нестандартный шрифт средствами CSS
    • Плавающий :first-letter
    • Подмена текста изображением
    • Соответствия шрифтов Windows, Mac и Unix/Linux
    • Строчный :first-letter
    • Текст под углом
    • Текст с CSS градиентом
    • Тень для текста
    • Эффект отражения

    Выравниваем inline и inline-block вертикально

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

    display : inline-block ;
    height : 100% ;
    vertical-align : middle ;
    font-size : 0 ;
    display : inline-block ;
    vertical-align : middle ;
    Наш элемент

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

    Наш же блок центруем по его высоте.

    Можно еще более упростить описание, воспользовавшись псевдоэлементом ::before и заодно отцентрировать наш элемент по горизонтали:

    Похожие публикации:

    1. Как ввести промокод в вк
    2. Как очистить строку от ненужных символов python
    3. Как перевернуть пдф файл горячие клавиши
    4. Как установить ubuntu на ноутбук lenovo