Как центрировать текст css

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

У меня есть элемент div, который содержит текст, и я хочу выровнять содержимое этого центра по вертикали.

Вот мой стиль div:

Каков наилучший способ сделать это?

  • 1
  • 1
  • 2

Вы можете попробовать этот базовый подход:

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

Более универсальный подход

Это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но для этого требуется контейнер с фиксированной высотой:

CSS просто выравнивает <div> , вертикально центрирует выравнивание <span> , устанавливая высоту линии <div> , равную ее высоте, и делает <span> встроенным блоком с vertical-align: middle . Затем он устанавливает нормальную линию для строки <span> , поэтому ее содержимое будет естественно проходить внутри блока.

Имитация отображения таблицы

И вот еще один вариант, который может не работать в более старых браузерах, которые не поддерживают display: table и display: table-cell (в основном просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML — тот же, что и второй пример:

Использование абсолютного позиционирования

В этом методе используется абсолютно позиционированный элемент, устанавливающий верхний, нижний, левый и правый значения 0. Он более подробно описан в статье в Smashing Magazine, Absolute Горизонтальное и вертикальное центрирование в CSS.

Другой способ (пока не упомянутый здесь) — это использование Flexbox.

Просто добавьте следующий код в элемент контейнера:

Flexbox демо 1

В качестве альтернативы, вместо выравнивания содержимого через контейнер, flexbox также может центрировать элемент flex с автоматическим полем, когда в контейнере flex только один элемент flex (как в примере, приведенном в вопросе выше).

Поэтому для центрирования гибкого элемента по горизонтали и вертикали просто установите его с margin:auto

Flexbox Demo 2

NB. Все вышесказанное относится к центрированию предметов при их горизонтальном расположении. Это также поведение по умолчанию, потому что по умолчанию значение для flex-direction — row . Если, однако, flex-элементы должны быть размещены в вертикальных столбцах, то в контейнере необходимо задать flex-direction: column для установки главной оси в качестве столбца, а дополнительные свойства justify-content и align-items теперь работают с другими Обход с помощью justify-content: center центрирование по justify-content: center вертикали и align-items: center центрирование по горизонтали)

flex-direction: column демо

Хорошее место, чтобы начать с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера — это flexyboxes

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кросс-браузерной совместимости для display: flex и align-items вы можете использовать следующее:

Вы можете легко сделать это, добавив следующий фрагмент кода CSS:

Это означает, что ваш CSS, наконец, выглядит следующим образом:

Для справки и для добавления более простого ответа:

Или как SASS/SCSS Mixin:

Этот метод может привести к размытию элементов из-за того, что элемент размещен на "полупикселе". Решением для этого является установка родительского элемента для сохранения-3d. Пример:

Мы живем в 2015 году и Flex Box поддерживается каждым крупным современным браузером.

Это будет способ создания сайтов здесь.

Узнайте об этом!

Все кредиты принадлежат владельцу этой ссылки @Sebastian Ekström Ссылка; прочитайте пожалуйста. См. Его в действии codepen. Прочитав эту статью, я также создал демонстрационную скрипту.

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

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

Итак, для этого пишем:

Это все, что вам нужно. Это аналогичный метод для метода абсолютной позиции, но с ростом мы не должны устанавливать высоту элемента или свойства position на родительском объекте. Он работает прямо из коробки, даже в Internet Explorer 9!

Чтобы сделать его еще более простым, мы можем записать его как mixin с его префиксами поставщика.

Flexbox, которые были представлены в CSS3, являются решением:

Совет. Замените строку выше, которая помечена как "Ключевая часть", одной из следующих строк, если вы хотите центрировать текст:

1) Только вертикально:

2) Только по горизонтали:

Как я заметил, этот прием работает и с сетками (т.е. display: grid ).

Гибкий подход

Решение, принятое в качестве ответа, идеально подходит для использования line-height равной высоте div, но это решение не работает идеально, когда текст переносится ИЛИ в две строки.

Попробуйте это, если текст обернут или находится в нескольких строках внутри div.

Для получения дополнительной информации см.:

Построено с использованием CSS+.

Вы можете использовать следующий фрагмент кода в качестве ссылки. Это работает как очарование для меня:

Вывод приведенного выше фрагмента кода выглядит следующим образом:

Enter image description here

Не устанавливайте атрибут height div , вместо этого используйте padding: для достижения эффекта. Аналогично высоте строки, она работает только при наличии одной строки текста. Хотя, таким образом, если у вас есть больше контента, текст все равно будет по центру, но сам div будет немного больше.

Так что вместо того, чтобы идти с:

Ты можешь сказать:

Это установит верхний и нижний padding div на 60px , а левый и правый padding равны нулю, 60px высоту div 120 пикселей (плюс высота вашего шрифта), и поместив текст вертикально по центру в div.

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

Вот еще один вариант использования flexbox.

Результат

Enter image description here

Я не уверен, что кто-то прошел путь в writing-mode , но я думаю, что он решает проблему чисто и имеет широкую поддержку:

Это, конечно, будет работать с любыми нужными вам измерениями (кроме 100% родительского). Если вы раскомментируете границы, будет полезно ознакомиться с ними.

JSFiddle демо для вас, чтобы возиться.

Поддержка Caniuse: 85,22% + 6,26% = 91,48% (даже Internet Explorer включен !)

Для всех ваших потребностей в вертикальном выравнивании!

Объявите этот Mixin:

Затем включите его в свой элемент:

Еще лучшая идея для этого. Вы тоже можете это сделать

Для одной строки текста (или одного символа) вы можете использовать эту технику:

Его можно использовать, когда #box имеет нефиксированную относительную высоту в%.

Посмотрите живую демонстрацию в JsBin (проще редактировать CSS) или JsFiddle (проще изменить высоту результирующего кадра).

Если вы хотите поместить внутренний текст в HTML, а не в CSS, вам нужно обернуть текстовое содержимое в дополнительный встроенный элемент и отредактировать #box::after чтобы соответствовать ему. (И, конечно, content: свойство должно быть удалено.)

Например, <div ><span>TextContent</span></div> . В этом случае #box::after следует заменить на #box span .

Для поддержки Internet Explorer 8 вы должны заменить :: на :

Использование этого атрибута (или эквивалентного класса) в родительском теге работает даже для многих дочерних элементов для выравнивания:

Попробуйте свойство transform:

Я просто хотел бы расширить ответ от Michielvoo, чтобы высвободить потребность в высоте строки и дыхании высоты div. Это просто упрощенная версия, например:

ПРИМЕЧАНИЕ: закомментированная часть css необходима для fixed-height вложенного div .

Очень простое и мощное решение для вертикального выравнивания центра:

Попробуйте следующий код:

Следующий код поместит div в середину экрана независимо от размера экрана или div size:

Подробнее о flex здесь.

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

Мне понадобилась строка щелчкообразных слонов, вертикально центрированная, но без использования таблицы, чтобы обойти некоторую сеть. 9 странность.

В конце концов я нашел самый красивый CSS (для моих нужд), и это отлично с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной.

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

Вы можете использовать метод позиционирования в CSS:

Надеюсь, вы тоже используете этот метод.

Установите его внутри button вместо div если вы не заботитесь о его небольшом визуальном 3D-эффекте.

Абсолютное позиционирование и растяжение

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

В приведенном ниже коде я снова использовал этот метод для центрирования дочернего элемента как по горизонтали, так и по вертикали, хотя этот метод можно использовать только для вертикального центрирования.

HTML

CSS

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

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

К сожалению, вышесказанное не будет работать в Internet Explorer 7 и ниже, и, как и в предыдущем методе, содержимое внутри дочернего элемента div может стать слишком большим, что приведет к его скрытию.

Как центрировать текст css

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

У меня есть элемент <div> который содержит текст, и я хочу выровнять содержимое этого <div> вертикали по центру.

Вот мой стиль <div> :

Как лучше всего достичь этой цели?

Ответы

Michiel van Oosterhout picture

Вы можете попробовать этот базовый подход:

Однако это работает только для одной строки текста, потому что мы устанавливаем высоту строки на ту же высоту, что и содержащий элемент box.

Более универсальный подход

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

CSS просто определяет размер <div> , вертикальный центр выравнивает <span> , устанавливая высоту строки <div> равной его высоте, и делает <span> встроенный блок с vertical-align: middle . Затем он устанавливает нормальную высоту строки для <span> , поэтому его содержимое естественным образом перетекает внутрь блока.

Моделирование отображения таблицы

А вот еще один вариант, который может не работать в старых браузерах, которые не поддерживают display: table и display: table-cell (в основном это просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML такой же, как и во втором примере:

Использование абсолютного позиционирования

Этот метод использует абсолютно позиционированный элемент, устанавливающий верхний, нижний, левый и правый угол в 0. Более подробно он описан в статье в Smashing Magazine, Абсолютное горизонтальное и вертикальное центрирование в CSS .

Другой способ (еще не упомянутый здесь) — использование Flexbox .

Просто добавьте в элемент контейнера следующий код:

Демонстрация Flexbox 1

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

Поэтому, чтобы центрировать гибкий элемент по горизонтали и вертикали, просто установите его с помощью margin:auto

Демонстрация Flexbox 2

NB: все вышесказанное относится к центрированию предметов при их расположении горизонтальными рядами . Это также поведение по умолчанию, потому что по умолчанию значение для flex-direction равно row . Если, однако, гибкие элементы необходимо расположить в вертикальных столбцах , тогда в контейнере следует установить flex-direction: column чтобы установить основную ось в качестве столбца и дополнительно justify-content и align-items properties теперь работают наоборот: justify-content: center центрируется по вертикали, а align-items: center центрируется по горизонтали)

flex-direction: column демо

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера, — это flexyboxes.

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кроссбраузерной совместимости для display: flex и align-items вы можете использовать следующее:

Вы можете легко сделать это, добавив следующий фрагмент кода CSS:

Это означает, что ваш CSS, наконец, выглядит так:

BAR picture

Для справки и для добавления более простого ответа:

Или как миксин SASS / SCSS:

Этот метод может привести к размытию элементов из-за того, что элемент размещен на «половине пикселя». Решением для этого является установка для его родительского элемента значения preserve-3d. Как следующее:

Мы живем в 2015+, и Flex Box поддерживается всеми основными современными браузерами.

С этого момента и дальше будут создаваться веб-сайты.

Узнать его!

Вся заслуга принадлежит владельцу этой ссылки @Sebastian Ekström Link ; пожалуйста, пройдите через это. Посмотрите код в действии. Прочитав приведенную выше статью, я также создал демонстрационную скрипку .

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

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

Итак, для этого пишем:

Это все, что вам нужно. Это метод, аналогичный методу абсолютного положения, но с той стороны, что нам не нужно устанавливать какую-либо высоту для элемента или свойства-положения для родительского элемента. Он работает прямо из коробки, даже в Internet Explorer 9 !

Чтобы сделать его еще более простым, мы можем написать его как миксин с его префиксами поставщика.

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

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

Это работает только для одной строки текста, потому что мы устанавливаем высоту строки на ту же высоту, что и содержащий элемент box.

Более универсальный подход

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

CSS просто определяет размер

Моделирование отображения таблицы

А вот еще один вариант, который может не работать в старых браузерах, не поддерживающих display: table и display: table-cell (в основном просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML такой же, как и во втором примере:

Использование абсолютного позиционирования

Этот метод использует абсолютно позиционированный элемент, устанавливающий верхний, нижний, левый и правый угол в 0. Более подробно он описан в статье в Smashing Magazine. Абсолютное горизонтальное и вертикальное центрирование в CSS.

  • 60 Потому что что-то идет не так, если div или текст изменяются или добавляется больше содержимого.
  • 12 Но это то, что он сказал, если вы знаете, сколько текста вы будете использовать, это вполне приемлемо . решение ниже, однако, более гибкое
  • 3 В моем Firefox 22.0 хорошо работает только 3-й подход, однако он работает не во всех браузерах. Первые 2 подхода перестают работать должным образом, как только я изменяю размер высоты для div
  • 7 Как я могу достичь той же цели, установив высоту div на: "height: 100%;" ?
  • 9 table-cell техника довольно крутая, но затем содержимое изменяется, чтобы соответствовать родительскому контейнеру. Вот отличная техника от CSS Tricks с использованием псевдоэлемента before : css-tricks.com/centering-in-the-unknown. Размер содержимого таким образом не изменяется, но он работает только в IE8 +.

Другой способ (здесь еще не упомянут) — использование Flexbox.

Просто добавьте следующий код в контейнер элемент:

Демонстрация Flexbox 1

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

Чтобы центрировать гибкий элемент по горизонтали и вертикали, просто установите его с помощью margin:auto

Flexbox Demo 2

NB: Все вышесказанное относится к центрированию предметов при их раскладке в горизонтальные ряды. Это также поведение по умолчанию, потому что по умолчанию значение для flex-direction является row . Если же flex-элементы необходимо разместить в вертикальные колонны, тогда flex-direction: column должен быть установлен на контейнере, чтобы установить главную ось в качестве столбца и дополнительно justify-content и align-items свойства теперь работают наоборот с участием justify-content: center центрирование по вертикали и align-items: center центрирование по горизонтали)

flex-direction: column демо

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера, — это flexyboxes.

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кроссбраузерной совместимости для display: flex и align-items , вы можете использовать следующее:

  • 46 Опорный стол Flexbox
  • 3 Это работает и для меня, остальное выше не работает на моем сайте. Но визуальная студия не распознает display: flex .
  • Скрипка вообще не работает, текст по-прежнему на верхнем краю
  • 1 если у меня есть тег

Вы можете легко сделать это, добавив следующий фрагмент кода CSS:

Это означает, что ваш CSS, наконец, выглядит так:

  • 6 Однако похоже, что это убивает атрибуты поля.
  • 2 @Costa — Возможно, вам также придется перемещать родительский div, если вы перемещаете что-то внутри этого div . проверьте stackoverflow.com/questions/2062258/…
  • к сожалению, это не поддерживает вертикальную прокрутку . вероятно, из-за display: table-cell . (
  • 2 Отключает min-heigth .

Для справки и для добавления более простого ответа:

Или как миксин SASS / SCSS:

Сообщение в блоге Себастьяна Экстрёма Вертикальное выравнивание всего с помощью всего 3 строк CSS:

Этот метод может привести к размытию элементов из-за того, что элемент помещается на половину пикселя . Решение этой проблемы — установить для его родительского элемента значение preserve-3d. Как следующее:

Мы живем в 2015+, и Flex Box поддерживается всеми основными современными браузерами.

Так будут и дальше делаться сайты.

Узнать его!

  • 3 Чистый CSS: помогло мне, но мне почему-то пришлось использовать absolute позиционирование ..
  • У меня была та же проблема, что и у @ d4Rk. Мой (блочный) контейнер имел относительное позиционирование и высоту, а элемент, требующий вертикального центрирования (изображение), должен был быть абсолютно позиционирован. Какая сложная / простая проблема !! Надеюсь, что в следующей версии CSS будет простое / простое исправление.

Вся заслуга принадлежит владельцу этой ссылки @Sebastian Ekstr m Link; пожалуйста, пройдите через это. Посмотрите код в действии. Прочитав эту статью, я также создал демонстрационную скрипку.

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

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

Итак, для этого пишем:

Это все, что вам нужно. Это метод, аналогичный методу абсолютного положения, но с той стороны, что нам не нужно устанавливать какую-либо высоту для элемента или свойства положения для родительского элемента. Он работает прямо из коробки, даже в Internet Explorer 9!

Чтобы сделать его еще более простым, мы можем написать его как миксин с его префиксами поставщика.

  • изменяя размер шрифта, он перемещается повсюду

В флексбоксах CSS3 есть крошечная магия:

Наконечник: Замените строку выше, отмеченную как &#171;Ключевая часть&#187;, одной из этих строк, если вы хотите центрировать текст:

Только по вертикали:

Только по горизонтали:

Как я заметил, этот трюк работает с сетками (т.е. display: grid ), также.

  • Не могли бы вы объяснить, почему в данном случае флекс так влияет на центрирование абзаца?
  • @elena На самом деле, я не знаю, почему, я обнаружил, когда пытался. Однако это будет рассмотрено для более новых версий CSS. Например, если вы измените отображение на сетку в этом случае, он будет работать так же, как гибкие боксы. Я думаю, что сетки и флексбоксы содержат новые функции, позволяющие компенсировать предыдущие ошибки CSS; и этот трюк — один из них.

Гибкий подход

Решение, принятое в качестве ответа, идеально подходит для использования line-height такая же, как высота div, но это решение не работает идеально, когда текст обернут ИЛИ находится в двух строках.

Попробуйте это, если текст обернут или находится на нескольких строках внутри div.

Для получения дополнительной информации см .:

Многострочный текст по центру по вертикали

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

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

Попробуйте это решение:

Создан с использованием CSS +.

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

Вывод приведенного выше фрагмента кода выглядит следующим образом:

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

    Спасибо satwik boorgula, я не думаю, что у вас проблемы с кодом, возможно, в моем коде есть конфликт. Я тестирую этот код:

Не устанавливайте height атрибут div , но вместо этого используйте padding: для достижения эффекта. Как и в случае с высотой строки, он работает, только если у вас одна строка текста. Хотя таким образом, если у вас больше контента, текст все равно будет центрирован, но сам div будет немного больше.

Итак, вместо того, чтобы идти с:

Ты можешь сказать:

Это установит верх и низ padding из div к 60px , а слева и справа padding к нулю, делая div 120 пикселей (плюс высота шрифта) в высоту и размещение текста вертикально по центру в div.

Вот еще один вариант использования flexbox.

Результат

Вот отличная статья о центрировании в css. проверьте https://ishadeed.com/article/learn-css-centering/

  • Это лучший ответ. Просто и без фиксированных значений высоты и ширины.

Я не уверен, что кто-то пошел writing-mode маршрут, но я думаю, что он решает проблему чисто и имеет широкая поддержка:

Это, конечно, будет работать с любыми размерами, которые вам нужны (кроме 100% родительского). Если вы раскомментируете границы, будет полезно ознакомиться.

Демо JSFiddle для вас.

Поддержка Caniuse: 85,22% + 6,26% = 91.48% (есть даже Internet Explorer!)

Для всех ваших потребностей в вертикальном выравнивании!

Объявите этот миксин:

Затем включите его в свой элемент:

  • 2 Отлично работает. Просто комментарий для некоторых читателей: это код Sass.

Еще лучшая идея для этого. Ты тоже можешь это сделать

Для одной строки текста (или одного символа) вы можете использовать эту технику:

Это мочь использоваться, когда #box имеет нефиксированный, относительная высота в%.

Посмотрите живую демонстрацию на JsBin (проще редактировать CSS) или JsFiddle (легче изменить высоту рамки результата).

Если вы хотите разместить внутренний текст в HTML, а не в CSS, вам необходимо обернуть текстовое содержимое дополнительными в линию элемент и редактировать #box::after чтобы соответствовать этому. (И, конечно, content: собственность должна быть удалена.)

Для поддержки Internet Explorer 8 необходимо заменить :: с участием : .

  • Из всех методов, описанных здесь, ваш был единственным, который творил чудеса. Мой случай: div, у которого был элемент span со значком вращающихся часов с использованием css (для слоя загрузки). Я просто удалил "TextContent" (оставив свойство как пустую строку) для #box :: after, и все.

Попробуйте свойство transform:

Самый простой и универсальный способ (как и в случае с таблицей Михилву):

Использование этого атрибута (или эквивалентного класса) в родительском теге работает даже для многих дочерних элементов для выравнивания:

Очень простое и мощное решение для вертикального выравнивания центра:

  • 1 Но это не вертикальный центр .
  • 1 Это если поменять "верх: 45%;" на &#171;верх: 50%;&#187;. Просто попробовал с одной, двумя, тремя линиями в круге, и центр был идеально выровнен.

Следующий код поместит div в середину экрана независимо от размера экрана или div размер:

Подробнее о flex Вот.

Попробуйте следующий код:

Я просто хотел бы расширить ответ от Michielvoo, чтобы освободить потребность в высоте строки и дыхании высоты div. По сути, это просто упрощенная версия, подобная этой:

ПРИМЕЧАНИЕ: закомментирована часть css необходимо для fixed-height вложения div .

Мне нужен был ряд интерактивных слонов, вертикально центрированных, но без использования стола, чтобы обойти некоторые странности Internet Explorer 9.

В конце концов я нашел самый лучший CSS (для своих нужд), и он отлично работает с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной .

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

Вы можете использовать метод позиционирования в CSS:

Посмотрите результат здесь .

Надеюсь, вы тоже воспользуетесь этим методом.

Установите это в button вместо div если вас не волнует его небольшой визуальный 3D-эффект.

Это легко и очень быстро:

  • Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, улучшает его долгосрочную ценность.

Абсолютное позиционирование и растяжка

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

В приведенном ниже коде я снова использовал этот метод для центрирования дочернего элемента по горизонтали и вертикали, хотя вы можете использовать этот метод только для вертикального центрирования.

HTML

CSS

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

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

К сожалению, вышеуказанное не будет работать в Internet Explorer 7 и более ранних версиях, и, как и в предыдущем методе, содержимое дочернего div может стать слишком большим, что приведет к его скрытию.

Добавьте этот небольшой код в свойство CSS вашего элемента. Это превосходно. Попытайся!

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

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