Как выровнять блок по центру css по вертикали

Как выровнять блок по вертикали?

Сначала напишите, какие браузеры поддерживаете. Это очень важно! Посмотрите вот здесь Вертикальное выравнивание по центру — 1 cпособ годится для IE8+.

1 сен 2012 в 19:19
меня бы утроило узнать все способы, лишним никогда не будет)
1 сен 2012 в 19:22

2 ответа 2

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

1. Решение через Flexbox

.container-fluid < height: 400px; background-color: lightgreen; display: flex; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ justify-content: center; >

  
 
 
 
 
Some Button
 
 
 
 

2. Решение через псевдоэлемент с поддержкой IE 9

.container-fluid < height: 400px; background-color: lightgreen; overflow: hidden; position: relative; text-align: center; >/* Обертка */ .container-fluid:before < content: ''; height: 100%; display: inline-block !important; vertical-align: middle; >/* Блок, который нужно выровнять */ .row

  
 
 
 
 
Some Button
 
 
 
 

3. Решение через абсолютное позиционирование

.container-fluid < height: 400px; background-color: lightgreen; overflow: hidden; position: relative; >.row

  
 
 
 
 
Some Button
 
 
 
 

4. Решение через line-height

.container-fluid < height: 400px; background-color: lightgreen; overflow: hidden; position: relative; >.row

  
 
 
 
 
Some Button
 
 
 
 

Отслеживать
ответ дан 15 фев 2017 в 13:28
MobiDevices MobiDevices
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков

Так можно с line-height

.container-fluid < height: 400px; background-color: lightgreen; overflow: hidden; position: relative; >.row

  
 
 
 
 
Some Button
 
 
 
 

Отслеживать
ответ дан 6 ноя 2020 в 21:32
user414832 user414832

• html
• css

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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

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

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

Начнем с общего описания задачи.

Задача вертикального центрирования

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

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

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

Метод line-height

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

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента .

HTML:

 
Нужный текст
 
 

CSS:

#child

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Центрирование изображения с помощью line-height

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

HTML:

CSS:

#parent < line-height: 200px; >#parent img

Значение свойства line-height должно быть больше высоты изображения.

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

HTML:

 
Содержание
 
 

CSS:

#parent #child

Мы устанавливаем табличный вывод для родительского элемента div , а вложенный элемент div выводим как ячейку таблицы. Теперь можно использовать свойство vertical-align для внутреннего контейнера. Все, что находится в нем, будет центрироваться по вертикали.

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

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

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

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

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

HTML:

 
Содержание
 
 

CSS:

#parent #child

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

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

В коде примера выполняется центрирование по вертикали и горизонтали.

HTML:

 
Содержание
 
 

CSS:

#parent #child

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

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

К сожалению, данный метод не работает в IE7 и ниже.

Равные отступы сверху и снизу

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

HTML:

 
Содержание
 
 

CSS:

#parent < padding: 5% 0; >#child

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

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент — 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

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

Плавающий div

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

HTML:

 
Содержание
 
 

CSS:

#parent #floater < float: left; height: 50%; width: 100%; margin-bottom: -50px; >#child

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

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

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

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

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.vanseodesign.com/css/vertical-centering/
Перевел: Сергей Фастунов
Урок создан: 21 Сентября 2011
Просмотров: 686592
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Css выравнивание div по вертикали: Как выровнять текст или блок div по вертикали

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

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

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

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

1-ый способ

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

 
 
 
Некоторая полезная информация, которая должна располагаться по центру.
 
  

#wrapper < display : table; >#cell

Плюсы

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

Минусы

• Не работает в IE 7 и меньше
• Много вложенных тэгов

2-ой метод

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

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

 
Content Here
  

#content < position : absolute; top : 50%; height : 240px; margin-top : -120px; /* минус от половины высоты */ >

Плюсы

• Работает во всех броузерах.
• Нет лишней вложенности.

Минусы

• Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

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

 
 
здесь контент
 

#floater < float : left; height : 50%; margin-bottom : -120px; >#content

Плюсы

• Работает во всех броузерах.
• Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

• Думаю только один: что используется лишний пустой элемент.

4-ый метод.

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

 
Важная информация.
 

#content

Плюсы

Минусы

• Не работает в Internet Explorer
• Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

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

 
Какая-то строка текста
 

#content

Плюсы

• Работает во всех броузерах.
• Не обрезает текст, если он не влез.

Минусы

• Работает только с текстом (не работает с блочными элементами).
• Если текста больше чем одна строка, то выглядит очень плохо.

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

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

Шаг 1

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

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

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

      • Home
      • Products
      • Blog
      • Contact
      • About

      Шаг 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

      Перед тем как сделать наш контент выровненным по центру, необходимо для 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

      Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут 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

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

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

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

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

      Vertical align CSS — выравнивание по вертикали в помощью CSS

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

      В данной статье мы рассмотрим:

      • свойство vertical-align, как и когда оно работает;
      • метод центрирования по вертикали элемента с известной высотой;
      • центрирование по вертикали элементов с изменяемой высотой.

      Свойство vertical-align влияет только на элементы, у которых свойство display имеет значения inline, inline-block или table-cell. Оно принимает в качестве значений число, проценты или ключевое слово.

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

      Ключевые значения vertical-align могут быть следующими:

      • baseline;
      • sub;
      • super;
      • text-top;
      • text-bottom;
      • middle;
      • top;
      • bottom.

      Большинство из них не требует дополнительного объяснения. Стоит отметить только sub и super, которые отображают элемент как подстрочный и надстрочный, не изменяя при этом размер шрифта.

      Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align. У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

       
       
      grilled bacon
       
       
       
      tasty bacon
       
       
       
      crispy bacon
       
       
       
      bacon
       

      Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom. Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.

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

       
       
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt dolores, consequatur dolorem, dignissimos debitis distinctio. Voluptas eligendi fuga voluptatem eos.
       

      Если мы знаем высоту блока, можно использовать абсолютное позиционирование, чтобы осуществить CSS вертикальное выравнивание по центру.

      Применив к контейнеру свойство position: relative, можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

      .container < position: relative; background: #444; >.box

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

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

      Отличные результаты для центрирования по вертикали элементов с изменяемой высотой можно получить, объединив vertical-align: middle с псевдоэлементами. Возьмём тот же пример с блоком внутри контейнера, но в этот раз блок будет иметь изменяемую высоту.

      Главный приём здесь — создать невидимый элемент (используя псевдоэлемент), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle. После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center. Затем центрировать блок по горизонтали, используя text-align: center:

      .container < height: 400px; margin: 20px; background: #444; font-size: 0; text-align: center; >.container:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.box

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

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

      Данная публикация является переводом статьи «Vertical-Alignment in CSS» , подготовленная редакцией проекта.

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

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

      Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием — вы обратились по адресу.

      Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…

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

      У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height. Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.

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

      Взгляните на приведенный ниже пример.

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

      Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.

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

      Начнем с основ выравнивания по вертикали CSS div:

      • position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
      • position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
      • position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
      • position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

      Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).

      Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

      Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

      Старое свойство: нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите приведенный ниже пример.

      Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотрите приведенный ниже пример.

      В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

      Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

      Можно использовать flexbox. Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали. С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

      Используя flexbox расположение, можно центрировать несколько блоков.

      Если вы примените то, что узнали из этих примеров, то сможете освоить CSS выравнивание блока по вертикали в кратчайшие сроки.

      Пожалуйста, оставьте свои отзывы по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки низкий вам поклон!

      Данная публикация является переводом статьи «CSS Vertical Align for Everyone (Dummies Included)» , подготовленная редакцией проекта.

      Как вертикальное выравнивание элементов в div?

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

      Чтобы это не происходило, вы можете установить h2 для поведения встроенного потока:

      #header > h2

      Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для «известного размера», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию — положение: относительный работает для меня:

      #header < position: relative; width: 20em; height: 20em; >#img-for-abs-positioning

      Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.

      ОБНОВИТЬ:

      Вот полный пример, который работает на Firefox 3:

          #header > h2 < display: inline; >#header < border: solid 1px red; position: relative; >#img-for-abs-positioning  
       
      Header
        
        

      alignment — Русский — it-swarm.com.ru

      alignment — Русский — it-swarm.com.ru

      Лучший способ центрировать на странице по вертикали и горизонтали?

      Цель выравнивания памяти

      Как вертикально центрировать div для всех браузеров?

      Как выровнять текст в столбцах, используя Console.WriteLine?

      Выравнивание по левому, центральному и правому краям в нижней части той же строки

      Выровнять по вертикали, используя CSS 3

      Центрируйте тег h2 внутри DIV

      Сложив Divs снизу вверх

      Вертикальное выравнивание текста в ячейке таблицы

      Как я могу отцентрировать текст по левому краю, даже если он обернут?

      Как расположить элементы навигации по вертикали (Twitter Bootstrap)?

      пытаясь выровнять кнопку HTML в центре моей страницы

      Вертикальный текст выравнивания в внутреннем блоке div

      Как вертикальное выравнивание элементов в div?

      Как горизонтально центрировать ?

      HorizontalAlignment = Stretch, MaxWidth и Left выровнены одновременно?

      CSS способ горизонтально выровнять таблицу

      Как совместить флажки и их метки последовательно в кросс-браузерах

      Установить cellpadding и cellspacing в CSS?

      Две HTML-таблицы рядом, по центру страницы

      Как заставить элементы WPF ListView повторяться по горизонтали, как горизонтальная полоса прокрутки?

      Как выровнять изображение и текст по вертикали TD элемент?

      Вертикально выровнять текст рядом с изображением?

      Как выровнять содержимое div снизу?

      Каков наилучший способ выравнивания по левому краю и выравнивания по правому краю двух тегов div?

      Как выровнять число как это в C?

      Убедительные примеры пользовательских C ++-распределителей?

      Выравниваются ли переменные стека с помощью GCC __attribute __ ((align (x)))?

      Почему выравнивание по вертикали: text-top; не работает в CSS

      Как выровнять по центру (по горизонтали/ширине) страницы

      Выровнять текст по вертикали внутри UILabel

      Есть ли «правильный» способ заставить NSTextFieldCell рисовать вертикально центрированный текст?

      Вертикальная (повернутая) метка в Android

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

      Как центрировать содержимое ячеек таблицы LaTeX, столбцы которой имеют фиксированную ширину?

      Вертикальное выравнивание текста в WPF TextBlock

      Вертикально выровнять div (без таблиц)

      Центрирование текста в многорядной ячейке в LaTex

      Выровнять элементы на панели стека?

      Что такое комбинация клавиш автоматического выравнивания в Eclipse?

      Выровнять значения ячеек в JTable?

      Android: вертикальное выравнивание для многострочного EditText (область текста)

      C ++ выравнивание при печати cout

      android: как выровнять изображение в горизонтальном центре изображения?

      Как обозначить каждое уравнение в среде выравнивания?

      номер несколько уравнений только с одним номером

      Как выровнять 3 деления (слева / по центру / справа) внутри другого деления?

      Как я могу выровнять все элементы по левому краю в JPanel?

      Как вертикально центрировать div?

      Добавить центрированный текст к середине

      ---

      -подобной строки

      выравнивание по центру фиксированной позиции div

      Перекрестное выравнивание по центру браузера с использованием CSS

      Как выровнять текст по вертикали в div?

      Вертикальное центрирование титульной страницы

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

      Как выровнять нижний колонтитул (div) по нижней части страницы?

      Как центрировать значок и текст в кнопке Android с шириной, установленной на «заполнить родительский элемент»

      CSS — вертикально центрировать изображение внутри плавающего элемента

      Вертикальное выравнивание содержимого строки DataGrid

      Как выровнять по вертикали 2 разных размера текста?

      Вертикальное выравнивание ячейки таблицы не работает

      iTextsharp, PdfPCell.VerticalAlignment и PdfPCell.Hor HorizontalAlignment

      центральные кнопки отправки формы html / css

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

      Как выровнять формы ввода в HTML

      CSS: Как выровнять по вертикали «label» и «input» внутри «div»?

      Вертикальное выравнивание пары флажок/метка

      Как центрировать двухстрочный текст в TextView на Android?

      Как выровнять указатель в C

      Android: Как вы можете выровнять кнопку внизу и список сверху?

      Совместите элементы рядом

      2 деления выровнены бок о бок, как сделать ширину правого делителя равной 100%?

      Как установить поле или отступ в процентах от высоты родительского контейнера?

      Выровняли управление памятью?

      выровнять изображение с помощью CSS HTML

      Многостолбцовый макет элементов списка CSS неправильно выравнивается в Chrome

      Центрирующие пули в центрированном списке

      Выравнивание памяти в C-структурах

      Как мне вертикально отцентрировать текст UITextField?

      Я хочу выровнять текст по вертикали в поле выбора

      iText: вертикальное выравнивание ячейки PdfTable

      Добавить левое поле в UITextField

      Как сделать сетку из композитного компонента JSF?

      UILabel выровнять текст по центру

      Выровнять кнопку внизу элемента div с помощью CSS

      Как выровнять вертикальный блок в строке текста?

      Как выровнять плавающие div по вертикали?

      выравнивание текста не работает

      Как «выровнять» текст в RichTextBox C #?

      Выровнять ссылку справа

      Выравнивание изображения HTML снизу внутри контейнера DIV

      Android View выровнять снизу (программно) без XML

      Может ли переполнение текста быть в центре?

      CSS центральный элемент с позицией: относительный;

      Выровнять текст по вертикали внутри элемента div

      Как расположить текст по центру надписи в заголовке Excel по вертикали?

      Выравнивание ячеек Excel: числовые значения, например, для xlLeft, xlRight или xlCenter?

      как правильно выровнять виджет в горизонтальном линейном макете Android?

      Как сделать выравнивание на консоли в php

      Как выровнять div внутри элемента td с помощью класса CSS

      Content dated before 2011-04-08 (UTC) is licensed under CC BY-SA 2.5. Content dated from 2011-04-08 up to but not including 2018-05-02 (UTC) is licensed under CC BY-SA 3.0. Content dated on or after 2018-05-02 (UTC) is licensed under CC BY-SA 4.0. | Privacy

      vertical-alignment — html — выравнивание текста по вертикали css

      css vertical-align middle / html / css

      Я пытаюсь найти наиболее эффективный способ выравнивания текста с помощью div.Я попробовал несколько способов,но ни один из них не сработал.

      .testimonialText

       
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       

       
       
      GitHub Facebook 
      © 2019 Lorem Ipsum.
       
       
       

      CSS-Code:
      Код ниже складывает все элементы внутри родительского div в столбец, центрируя элементы по горизонтали и вертикали. Я использовал дочерний div, чтобы удерживать два элемента Anchor в одной строке (строке). Без дочернего div все три элемента (привязка, привязка и абзац) располагаются внутри столбца родительского div друг над другом. Здесь только дочерний div укладывается внутри столбца parent-div.

       .parent-div

      Css выравнивание по центру по горизонтали

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

      Горизонтальное

      text-align

      Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

      Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

      margin: auto

      Блок по горизонтали центрируется margin: auto :

      В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

      Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

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

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

      Есть три основных решения.

      position:absolute + margin

      Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

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

      Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

      Если мы знаем, что это ровно одна строка, то её высота равна line-height .

      Приподнимем элемент на пол-высоты при помощи margin-top :

      При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

      Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

      Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

      Одна строка: line-height

      Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

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

      Таблица с vertical-align

      У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

      В таблицах свойство vertical-align указывает расположение содержимого ячейки.

      Его возможные значения:

      baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

      Например, ниже есть таблица со всеми 3-мя значениями:

      Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

      Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

      Этот способ замечателен тем, что он не требует знания высоты элементов.

      Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

      Чтобы его растянуть, нужно указать width явно, например: 300px :

      Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

      Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

      Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

      Центрирование в строке с vertical-align

      Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

      В этом случае набор значений несколько другой:

      Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

      Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

      Работает во всех браузерах и IE8+.

      Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

      Центрирование с vertical-align без таблиц

      Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

      Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

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

      Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

      В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

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

      Убрать лишний пробел между div и началом inner , будет

      Центрирование с использованием модели flexbox

      Данный метод поддерживается всеми современными браузерами.

      • Не требуется знания высоты центрируемого элемента.
      • CSS чистый, короткий и не требует дополнительных элементов.
      • Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

      Итого

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

      Для горизонтального центрирования:

      • text-align: center – центрирует инлайн-элементы в блоке.
      • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

      Для вертикального центрирования одного блока внутри другого:

      Если размер центрируемого элемента известен, а родителя – нет

      Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

      Если нужно отцентрировать одну строку в блоке, высота которого известна

      Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

      Высота родителя известна, а центрируемого элемента – нет.

      Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

      Высота обоих элементов неизвестна.

      1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
      1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
      2. Решение с использованием flexbox.

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

      Простое центрирование DIV-элемента на странице

      Этот метод будет отлично работать во всех браузерах.

      Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

      Центрируем DIV внутри DIV-элемента старым способом

      Этот метод div выравнивания по центру будет работать во всех браузерах.

      Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).

      Центрируем DIV внутри DIV-элемента с помощью inline-block

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

      Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

      Центрируем DIV внутри DIV-элемента горизонтально и вертикально

      Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

      У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

      Центрируем DIV по нижней границе страницы

      Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

      У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

      Центрируем DIV на странице вертикально и горизонтально

      Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

      У div-элемента должна быть установлена ширина ( width ) и высота ( height ).

      Делаем адаптивное центрирование DIV-элемента на странице

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

      У центрированного div-элемента должно быть установлено свойство max-width .

      Центрируем DIV внутри элемента с помощью свойств внутреннего блока

      Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

      У внутреннего div должно быть установлено свойство max-width .

      Центрируем два адаптивных div-элемента рядом друг с другом

      Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

      Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

      DIV-элемент, центрированный при помощи Flexbox

      Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

      Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

      Данная публикация представляет собой перевод статьи « THE COMPLETE GUIDE TO CENTERING A DIV » , подготовленной дружной командой проекта Интернет-технологии.ру

      Смотрите также указатель всех приёмов работы.

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

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

      • Выравнивание по вертикали в уровне 3
      • Выравнивание по вертикали и горизонтали в уровне 3
      • Выравнивание в области просмотра в уровне 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

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

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

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

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

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

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

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

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

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

      Created 5 May 2001;
      Last updated Вт 05 ноя 2019 19:12:56

      Рекомендуем к прочтению

      html — Как вертикально выровнять по центру содержимого div с определенной шириной / высотой?

      Я немного исследовал это и из того, что я обнаружил, у вас есть четыре варианта:

      Версия 1: Родительский div с отображением в виде ячейки таблицы

      Если вы не против использования display: table-cell в родительском div, вы можете использовать следующие параметры:

       .area

      Версия 2: Родительский div с блоком отображения и ячейкой таблицы отображения содержимого

      .площадь < высота: 100 пикселей; ширина: 100 пикселей; фон: красный; маржа: 10 пикселей; выравнивание текста: центр; дисплей: блок; >.содержание

      Версия 3: родительский div с плавающей точкой и контентный div в виде ячейки таблицы отображения

       .area < фон: красный; маржа: 10 пикселей; выравнивание текста: центр; дисплей: блок; плыть налево; >.содержание

      Версия 4: Относительное положение родительского блока с абсолютным положением содержимого

      Единственная проблема, с которой я столкнулся с этой версией, заключается в том, что кажется, что вам придется создавать CSS для каждой конкретной реализации.Причина этого в том, что div содержимого должен иметь заданную высоту, которую будет заполнять ваш текст, и верхний край поля будет рассчитан из этого. Эту проблему можно увидеть в демонстрации. Вы можете заставить его работать для каждого сценария вручную, изменив% высоты вашего содержимого div и умножив его на -5, чтобы получить значение верхнего предела маржи.

       .area < положение: относительное; дисплей: блок; высота: 100 пикселей; ширина: 100 пикселей; граница: сплошной черный 1px; фон: красный; маржа: 10 пикселей; >.содержание

      vertical-align — CSS: каскадные таблицы стилей

      Свойство CSS vertical-align устанавливает вертикальное выравнивание встроенного блока, блока встроенного блока или ячейки таблицы.

      Свойство vertical-align можно использовать в двух контекстах:

      Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока.

       вертикальное выравнивание: базовая линия; вертикальное выравнивание: суб; вертикальное выравнивание: супер; вертикальное выравнивание: верхний текст; вертикальное выравнивание: нижний текст; вертикальное выравнивание: по центру; вертикальное выравнивание: сверху; вертикальное выравнивание: снизу; вертикальное выравнивание: 10em; вертикальное выравнивание: 4 пикселя; вертикальное выравнивание: 20%; вертикальное выравнивание: наследование; вертикальное выравнивание: начальное; вертикальное выравнивание: вернуть; вертикальное выравнивание: отключено; 

      Свойство vertical-align указано как одно из значений, перечисленных ниже.

      Значения для встроенных элементов

      Родительские значения

      Эти значения выравнивают элемент по вертикали относительно его родительского элемента:

      базовый Выравнивает базовую линию элемента с базовой линией его родительского элемента.Базовая линия некоторых заменяемых элементов, таких как

      , не указана в спецификации HTML, а это означает, что их поведение с этим ключевым словом может различаться в разных браузерах. переходник Выравнивает базовую линию элемента с базовой линией нижнего индекса его родительского элемента. супер Выравнивает базовую линию элемента с верхним индексом его родительского элемента. текст вверху Выравнивает верх элемента по верхнему краю шрифта родительского элемента. текст внизу Выравнивает нижнюю часть элемента по нижней части шрифта родительского элемента. средний Выравнивает середину элемента по базовой линии плюс половину высоты родительского элемента по оси x. Выравнивает базовую линию элемента по заданной длине над базовой линией его родительского элемента. Допускается отрицательное значение. Выравнивает базовую линию элемента по заданному проценту над базовой линией его родительского элемента, при этом значение представляет собой процентное значение свойства line-height .Допускается отрицательное значение.

      Относительные значения линии

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

      верх Выравнивает верх элемента и его потомков с верхом всей строки. нижняя Выравнивает нижнюю часть элемента и его потомков по нижней части всей строки.

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

      Значения для ячеек таблицы

      baseline (и sub , super , text-top , text-bottom , и

      ) Выравнивает базовую линию ячейки с базовой линией всех других ячеек в строке, которые выровнены по базовой линии. верхняя Выравнивает верхний край заполнения ячейки с верхней частью строки. средний Центрирует поле заполнения ячейки в строке. нижняя Выравнивает нижний край заполнения ячейки с нижней частью строки.

      Допускаются отрицательные значения.

      Базовый пример

      HTML

        
      Изображение с выравниванием по умолчанию.
       
      Изображение с выравниванием по верхнему краю текста
       
      Изображение с выравниванием текста по нижнему краю.
       
      Изображение с выравниванием по центру.
        

      CSS

       img.top img.bottom img.middle

      Результат

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

      HTML

        
      вверху: в центре: внизу: super: sub: 
       
      верхний текст: нижний текст: 0.2em: -1em: 20%: -100%: 
        

       # * < размер коробки: рамка-рамка; >img < поле справа: 0,5em; >п

      Результат

      Выравнивание по вертикали в ячейке таблицы

      HTML

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

      CSS

       стол < маржа слева: авто; маржа-право: авто; ширина: 80%; >table, th, td < граница: сплошной черный 1px; >td

      Результат

      Таблицы BCD загружаются только в браузер

      Как вертикально выровнять элементы в Div

      Иногда центрирование элементов по вертикали с помощью CSS может вызвать некоторые проблемы.Однако есть несколько способов центрировать элементы в

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

      Создать HTML¶

      • Создайте два блока со следующим идентификатором: «синий» и «зеленый».

      Как выровнять блок по центру — полное руководство по центрированию DIV-элемента

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

      Простое центрирование DIV-элемента на странице

      Этот метод будет отлично работать во всех браузерах.

      .center-div

      Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

      Центрируем DIV внутри DIV-элемента старым способом

      Этот метод div выравнивания по центру будет работать во всех браузерах.

      .outer-div < padding: 30px; >.inner-div

      Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).

      Центрируем DIV внутри DIV-элемента с помощью inline-block

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

      .outer-div < padding: 30px; text-align: center; >.inner-div

      Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

      Центрируем DIV внутри DIV-элемента горизонтально и вертикально

      Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

      .outer-div < padding: 30px; >.inner-div

      У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

      Центрируем DIV по нижней границе страницы

      Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

      .outer-div < position: absolute; bottom: 30px; width: 100%; >.inner-div

      У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

      Центрируем DIV на странице вертикально и горизонтально

      Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

      .center-div

      У div-элемента должна быть установлена ширина ( width ) и высота ( height ).

      Делаем адаптивное центрирование DIV-элемента на странице

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

      .center-div

      У центрированного div-элемента должно быть установлено свойство max-width .

      Центрируем DIV внутри элемента с помощью свойств внутреннего блока

      Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

      .outer-div < padding: 30px; >.inner-div

      У внутреннего div должно быть установлено свойство max-width .

      Центрируем два адаптивных div-элемента рядом друг с другом

      Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

      .container < text-align: center; >.left-div < display: inline-block; max-width: 300px; vertical-align: top; >.right-div < display: inline-block; max-width: 150px; >screen and (max-width: 600px) < .left-div, .right-div < lef max-width: 100%; >>

      Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

      DIV-элемент, центрированный при помощи Flexbox

      Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

      .container < display: flex; align-items: center; justify-content: center; height: 100vh; >.item

      Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

      Валентин Сейидов автор-переводчик статьи « THE COMPLETE GUIDE TO CENTERING A DIV »

      Читать:

      Какой тег нельзя назвать контейнером