Vertical css align div: How to vertically center text with CSS?

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

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

Давайте поговорим о свойстве CSS Vertical Align

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

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

Вот пример:

См. Pen 1 # Example_OutSystems Experts — Выравнивание по вертикали на div от Александра Сантоса (@alexandre_santos) на CodePen.

Мы хотим центрировать контент, а не сам Div!

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

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

Взгляните на этот пример:

См. Pen 2 # Example_OutSystems Experts — Navbar with line-height от Александра Сантоса (@alexandre_santos) на CodePen.

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

Для того, чтобы это работало, у вас должен быть родительский контейнер с display: table; , и внутри этого контейнера у вас будет количество столбцов, которые вы хотите выровнять по центру, с display: table-cell; (и vertical-align: middle; ) свойство.

Давайте посмотрим на пример:

См. Перо 3 # Example_OutSystems Experts — Выравнивание ячеек таблицы по вертикали Александра Сантоса (@alexandre_santos) на CodePen.

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

Свойство позиции

Начнем с основ:

• положение: статическое; — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML.
• позиция: абсолютная; — используется для определения точной позиции, в которой должен находиться элемент. Эта позиция всегда связана с ближайшим предком в относительной позиции (не статической).Знаете ли вы, что произойдет, если вы не определите точное положение элемента? Вы теряете над этим контроль! Он отображается случайным образом, полностью игнорируя документооборот. По умолчанию он отображается в верхнем левом углу.
• позиция: относительная; — используется для позиционирования элемента относительно его нормального положения (статика). Эта позиция сохраняет порядок потока документа.
• позиция: фиксированная; — используется для размещения элемента относительно окна браузера, чтобы он всегда был виден в области просмотра.

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

Давайте сделаем наши грязные руки еще грязнее!

Вы хотите выровнять рамку по центру страницы?

Сначала получите элемент с относительным положением и желаемыми размерами. Например: 100% ширины и высоты.

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

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

См. Перо 4 # Example_OutSystems Experts — Абсолютное позиционирование с рамкой размера от Александра Сантоса (@alexandre_santos) на CodePen.

• Классная новая опция CSS3 : добавьте свойство преобразования со значением перевода -50%, и оно всегда будет центрировано. Как это:

См. Перо 5 # Example_OutSystems Experts — Абсолютное позиционирование без рамки от Александра Сантоса (@alexandre_santos) на CodePen.

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

Помните фиксированное положение? Вы можете сделать то же самое, что и с абсолютным положением, но вам не нужно относительное положение в родительском элементе — оно всегда будет относительно окна браузера.

CSS Vertical Align Criers: вы слышали о Flexbox?

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

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

Вот пример того, как центрировать коробку по вертикали:

См. Pen 6 # Example_OutSystems Experts — Макет Flexbox без размера блока от Александра Сантоса (@alexandre_santos) на CodePen.

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

А как насчет CSS Grid?

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

При этом его можно использовать просто для центрирования элементов в контейнере! Вот пример того, как центрировать коробку по вертикали:

См. Перо CodePen Home 7 # Example_OutSystems Experts — Макет сетки без поля размера, автор Бернардо Кардосо (@BenCardoso) на CodePen.

Подобно Flexbox, этот подход также требует отказа от старых браузеров, хотя поддержка в основных из них совершенно стабильна.

Чтобы узнать больше о CSS Grid, ознакомьтесь с этим полным руководством и некоторыми практическими примерами.

Никаких разрывах вертикального выравнивания CSS

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

. . .

Некоторое время спустя я проходил мимо дома Рикардо, но его там не было. Кто-то сказал мне, что он заснул на одной из многих удобных кушеток нашей компании.

Похоже на технический нокаут.

Но когда я посмотрел на экран его ноутбука…

Какого черта он делал? Играть в игры, пока он должен был работать?

Это очень много цветов для понедельника, который начался таким серым.

Ссылки и дополнительная литература

Способ создания программного обеспечения меняется. Будьте на шаг впереди и присоединяйтесь к нам на конференции разработчиков OutSystems — это ваша возможность узнать о последних передовых технологиях OutSystems и о том, как они могут помочь вам построить больше и ускорить вашу карьеру.Узнайте больше и сэкономьте свое место прямо здесь!

CSS: центрирующие элементы

См. Также указатель всех подсказок.

Центрирующие предметы

Распространенной задачей CSS является центрирование текста или изображений. По факту, существует три вида центрирования:

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

Центрирующие строки текста

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

П {выравнивание текста: центр}
h3 {text-align: center} 

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

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

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

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

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...
 Это скорее ... 

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

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

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
 

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

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

CSS level 2 не имеет свойства для центрирования вещей вертикально. Вероятно, он будет на уровне CSS 3 (см. Ниже).Но даже в CSS2 вы можете центрировать блоки по вертикали, комбинируя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок форматироваться как ячейка таблицы, потому что содержимое таблицы ячейку можно центрировать по вертикали .

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...

  
 Этот небольшой абзац ...
 

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

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

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

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

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

  
 Этот абзац…
 

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

div.container3 {
   высота: 10em;
     позиция: относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевод (0, -50%) } / * 4 * / 

Основные правила:

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

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

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

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

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0} 

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

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

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

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

  
 По центру!
 

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

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле справа: -50%; 
    преобразовать: перевести ( -50%,  -50%)} 

В следующем примере ниже объясняется, почему «margin-right: -50%» нужный.

Когда средство форматирования CSS поддерживает flex, это еще проще:

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

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0} 

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

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

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

  <стиль>
    тело {
        background: white}
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        заполнение: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле справа: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
     
 Красиво по центру 
 
    
 Этот текстовый блок центрирован по вертикали.
 И по горизонтали, если окно достаточно широкое.
   

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

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

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

(Использование ‘translate’ для центрирования в области просмотра было первым предложенный «Чарли» в ответе на переполнение стека.)

CSS Align — TutorialBrain

На главную »CSS» CSS Выровнять

Выравнивание CSS — это способ выравнивания элементов HTML.

По сути, это способ организации элементов. Важные выравнивания:

• CSS Text align
• CSS Vertical Align
• CSS image align
• CSS align div
• CSS Table align
• CSS float align

Есть 3 важных способа выровнять текст.

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

Синтаксис выравнивания текста:
выравнивание текста : слева ;
выравнивание текста : центр ;
выравнивание текста : вправо ;
выравнивание текста : выравнивание ;

 # text-align-left {
  выравнивание текста: слева;
  фон: цвет морской волны;
  красный цвет;
}

# text-align-center {
  выравнивание текста: центр;
  фон: желтый;
  цвет синий;
}

# text-align-right {
  выравнивание текста: вправо;
  фон: розовый;
  цвет: зеленый;
}
 

CSS выровнять по центру с использованием полей и ширины

Теперь, как еще можно выровнять div по центру по горизонтали?

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

Поле margin: auto используется вдоль свойства width для выравнивания элемента, такого как div (или контейнер).

margin: auto автоматически добавляет соответствующие поля, в то время как свойство width дает фиксированную ширину для div, чтобы div не расширялся.

Теперь, как еще можно выровнять div по центру по горизонтали?

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

Поле margin: auto используется вдоль свойства width для выравнивания элемента, такого как div (или контейнер).

margin: auto автоматически добавляет соответствующие поля, в то время как свойство width дает фиксированную ширину для div, чтобы div не расширялся.

Примечание / информация:

Если вы хотите выровнять div по центру, то одним из способов добиться этого является кодирование margin: auto вместе с ненулевым значением width: x (all действующие единицы) .

Ширина должна быть больше 0% и меньше 100%

 .margin-auto {
  маржа: авто;
  ширина: 45%;
  цвет фона: черный;
  цвет: желтый;
}
 

В CSS. Один из самых популярных способов выровнять изображение по центру — выполнить следующие 2 шага:

1. Установите автоматическое поле с помощью поля : auto . Если вы хотите выровнять только по горизонтали по центру, установите margin-left: auto & ma rgin-right: auto.
2. Разрешить элементу изображения начинаться с новой строки и занимать всю ширину. Это устанавливается с помощью дисплея : блок

 # margin-block {
  фон: фиолетовый;
  маржа: авто;
  дисплей: блок;
  ширина: 50%;
  высота: 60%;
}
 

CSS Text vertical-align устанавливает вертикальное расположение текста.

Синтаксис CSS Вертикальное выравнивание текста:

vertical-align: length; / * Здесь длина — это все применимые единицы измерения * /
vertical-align: baseline; / * Устанавливает элемент на основе управления родительским элементом * /
vertical -align: x%; / * x может быть положительным или отрицательным * /
/ * Если x> 0, текст упорядочивает себя на x% вверх
Если x <0, текст упорядочивает себя на x% вниз * /
vertical-align: middle; / * выравнивается по вертикали по направлению к середине родительского элемента * /
vertical-align: sub; / * выравнивает по вертикали как нижний индекс родительского элемента * /
vertical-align: super; / * выравнивается по вертикали как верхний индекс родительского элемента * /
vertical-align: bottom; / * для выравнивания текста внизу.Чаще всего используется в таблицах * /
Другой менее используемый синтаксис: :
vertical-align: top;
выравнивание по вертикали: верхний текст;
выравнивание по вертикали: нижний текст;

 #vertical_align_length {
  вертикальное выравнивание: 30 пикселей;
}

#vertical_align_baseline {
  вертикальное выравнивание: базовая линия;
}

# vertical_align_percent1 {
  вертикальное выравнивание: 30%;
}

# vertical_align_percent2 {
  вертикальное выравнивание: -40%;
}

#vertical_align_middle {
  вертикальное выравнивание: по центру;
}

#vertical_align_sub {
  вертикальное выравнивание: суб;
}

#vertical_align_super {
  вертикальное выравнивание: супер;
}
 

В предыдущем примере мы видели вертикальное выравнивание текстов в абзаце.

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

 а) выравнивание по вертикали: по центру;
 

Выравнивает текст по вертикали по центру. В предыдущем примере один из абзацев также использует свойство vertical-align: middle . Это работает даже для изображений, так что вы можете попробовать установить этот стиль и для своего тега «img».

Примечание / информация:
Если вы хотите центрировать текст на изображении, вы можете закодировать с выравниванием по вертикали , а также line-height . Высота строки должна быть на больше или равна высоте изображения.

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

Обычно это будет работать лучше, если вы установите высоту строки больше, чем размер шрифта текста, или высоту строки, равную высоте контейнера div.

• Еще один момент, на который следует обратить внимание: этот процесс может не работать, если у вас более 1 строки текста.
• Мы не рекомендуем использовать этот метод для центрирования текста на изображении, так как это усложнит вашу задачу.

Пример использования line-height для вертикального центрирования

 # parent-height {
  фон: розовый;
  высота: 150 пикселей;
  ширина: 400 пикселей;
  выравнивание текста: центр;
}

# child-line-height {
  высота строки: 150 пикселей;
}
 

 c)  Родительский div :
   дисплей: таблица;

     Детский div :
   дисплей: таблица-ячейка;
   вертикальное выравнивание: по центру;
 

Это работает, когда у вас есть родительский div и с этим родительским div связан дочерний div.

Итак, вы должны определить родительский div с display: table . Кроме того, вы должны закодировать дочерний div с помощью — display: table-cell & vertical-align: middle вместе.

Это один из наиболее эффективных способов выравнивания текста в div, который также имеет дочерний div.

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

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

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

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

 .v-align-padding {
  отступ: 20 пикселей 0;
  выравнивание текста: центр;
  граница: сплошной синий цвет 3px;
}

.h-align-padding {
  отступ: 0px 50px;
  выравнивание текста: центр;
  граница: сплошной розовый 3px;
}

.h-v-align-padding {
  отступ: 22px 50px;
  выравнивание текста: центр;
  граница: 3 пикселя сплошного желтого цвета;
}
 

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

• CSS Position property
• CSS float

CSS выровнять по левому краю с использованием свойства позиции

В начале этой страницы мы увидели, как выровнять текст по левому краю с помощью свойства text-align: left .

Таким же образом мы можем выровнять изображение по правому краю, таблицу вправо, согнуть вправо или div с помощью свойства position: absolute и установить свойства left или right для выравнивания по левой или правой стороне по горизонтали. .

CSS выровнять по правому краю, используя свойство position

мы можем использовать свойство position: absolute и установить свойства left или right для выравнивания по левой или правой стороне по горизонтали.

TutorialBrain не рекомендует использовать position: absolute для выравнивания по левому или правому краю, так как это может привести к перекрытию элементов .

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

 .absolute-right {
  позиция: абсолютная;
  вправо: 0 пикселей;
  ширина: 45%;
  фон: # 25e1a5;
}

.absolute-left {
  позиция: абсолютная;
  слева: 0px;
  ширина: 45%;
  фон: # ef1cd0;
}
 

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

Свойство CSS float управляет плавным перемещением элементов.

1. float: left — Чтобы переместить элемент (например, div) влево.
2. float: right — Чтобы перемещать элемент (например, div) вправо.

 .val1 {
плыть налево;
цвет фона: Темно-бирюзовый;
отступ: 30 пикселей;
}
.val2 {
float: right;
цвет фона: оранжевый;
отступ: 30 пикселей;
}
 

Интервью Вопросы и ответы CSS

Text-align:
В CSS свойство text-align используется для выравнивания текста по левому, правому краю, по центру или для выравнивания по центру текста, предоставляя равное пространство слева и справа.
Синтаксис :

• выравнивание текста: слева;
• выравнивание текста: по правому краю;
• выравнивание текста: по центру;
• выравнивание текста: выравнивание;

Свойство Vertical-align
vertical-align: middle;

CSS Text vertical-align устанавливает вертикальное расположение текста.

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

Установите автоматическое поле с помощью параметра margin: auto. Если вы хотите выровнять только по центру по горизонтали, установите margin-left: auto и margin-right: auto.

OR

Разрешить элементу изображения начинаться с новой строки и занимать всю ширину. Это устанавливается с помощью display: block.

Мы можем выровнять текст по левому, правому краю, по центру и по ширине, используя свойство CSS Align
align: left; — выровнять по левому краю.
выровнять: по центру; — выровнять по центру.
выровнять: вправо; — выровнять по правому краю.
выровнять: по ширине; — растянуть все линии одинаково.

Как выровнять текст с помощью CSS

Выровнять текст в CSS можно с помощью свойства text-align или свойства vertical-align .

1. Свойство text-align используется для указания того, как встроенный контент должен быть выровнен внутри блока. Например:
   Значения:
2. Свойство vertical-align используется для указания того, как встроенный контент должен быть выровнен по вертикали относительно одноуровневого встроенного содержимого. Например:

     style = "vertical-align: text-bottom;  

   Значения:
   • нижний
   • средний
   • верхний
   • нижний текст
   • базовая линия
   • верхний текст
   • нижний
   • супер
   9 900 В примере кода показаны эти свойства в использовании:

     
   
   
   
   
   
   
    
    Выровнять текст 
    
    
    Выравнивание по тексту 
    
    выравнивание текста: слева 
    выравнивание текста: по центру 
    выравнивание текста: вправо 
   
   text-align: justify - чтобы увидеть эффект выравнивания,
   текстовый блок должен быть обернут
   text-align: justify - чтобы увидеть эффект выравнивания,
   текстовый блок должен быть обернут
   text-align: justify - чтобы увидеть эффект выравнивания,
   текстовый блок должен быть обернут
   
    
    Вертикальное выравнивание 
    
   
   
   вертикальное выравнивание: снизу
   
   
   
   вертикальное выравнивание: средний
   
   
   
   вертикальное выравнивание: сверху
   
   
   
   вертикальное выравнивание: нижний текст
   
   
   
   вертикальное выравнивание: базовая линия
   
   
   
   вертикальное выравнивание: верхний текст
   
   
   вертикальное выравнивание:  sub 
   
   
   вертикальное выравнивание:  супер 
    
     

Приведенный выше код отобразит следующее:

Центрирование CSS (текст и изображения) с помощью Angular 11 Пример

В этом руководстве мы узнаем, как центрировать элементы в CSS и Angular 7/8 используя современный макет Flexbox.

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

Далее мы узнаем, как центрировать текст в CSS по горизонтали и вертикали с помощью Flexbox.

Центрирование элементов в CSS по горизонтали или вертикали всегда было сложной задачей, и разработчики использовали множество методов, которые иногда даже не имели смысла, особенно для новичков.

Но с появлением Flexbox центрирование CSS стало проще и понятнее, чем когда-либо.

Мы будем использовать Stackblitz для нашего проекта Angular.

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

Начнем с горизонтального центрирования.Откройте файл src / app / app.component.html и добавьте следующий

  

   
 Привет, Angular 8! 
 

  

  .center {
  дисплей: гибкий;
  justify-content: center;
}
  

 .center {
  дисплей: гибкий;
  высота: 300 пикселей;
  цвет фона: # ff1124;
  justify-content: center;
}
  

  .center {
  дисплей: гибкий;
  высота: 300 пикселей;
  цвет фона: # ff1124;
  justify-content: center;
  align-items: center;
}
  

  .center {
  дисплей: гибкий;
  высота: 300 пикселей;
  цвет фона: # ff1124;
  justify-content: center;
}

.center h2 {
  align-self: center;
}
  

  .center {
  дисплей: гибкий;
  цвет фона: # ff1124;
  justify-content: center;
  высота: 100вх;
}


.center h2 {
  align-self: center;
}
  

   Этот текст будет центрирован! 
  

  
 Этот текст будет центрирован! 
  

  <стиль>
.centered-text {
 выравнивание текста: центр
}

  

  
 Этот текст центрирован! 
  

  

     
 Центрировать текст 
 
     
 С Flexbox 
 

  

  .container h2, .container h3 {
  выравнивание текста: центр;
}

.container {
  высота: 500 пикселей;
  дисплей: гибкий;
  justify-content: center;
  align-items: center;
}
  

  .image-container {
  дисплей: гибкий;
  justify-content: center;
}
  

  .image-container {
  дисплей: гибкий;
  // justify-content: center;
  align-items: center;
}
  

  .image-container img {
  align-self: center;
}
  

  корпус {
  маржа: 0;
}
.image-container {
    дисплей: гибкий;
    высота: 100вх;
    justify-content: center;
    align-items: center;
}