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

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

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

Используйте свойство vertical-align

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

Значения для vertical-align выравнивают элемент относительно родительского элемента.

• Значения line-relative вертикально выравнивают элемент относительно всей строки.
• Значения для ячеек таблицы относительны к table-height-algorithm, который обычно указывает на высоту строки.

Не работает со старыми версиями IE. Решением является добавление child .

Пример

html> html> head> title>Заголовок документа title> style type="text/css"> div < display: table-cell; width: 250px; height: 200px; padding: 10px; border: 3px dashed #1c87c9; vertical-align: middle; > style> head> body> div>Вертикально выровненный текст div> body> html>

Используйте CSS Flexbox

С Flexbox можно выровнять элементы по вертикали или по горизонтали с помощью свойств align-items, align-self, и justify-content.

Читайте наше Руководство Flexbox, чтобы научиться, как создать flexible layout, оптимизированный для разных устройств.

Пример

html> html> head> title>Заголовок документа title> style> section < display: flex; width: 50%; height: 200px; margin: auto; border-radius: 10px; border: 3px dashed #1c87c9; > p < margin: auto; /* Important */ text-align: center; > style> head> body> section> p> Центрирован с помощью Flexbox. p> section> body> html>

Используйте CSS display:table

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

Пример

html> html> head> title>Заголовок документа title> style> #parent < display: table; width: 100%; height: 200px; border: 3px dashed #1c87c9; text-align: center; > #child < display: table-cell; vertical-align: middle; > style> head> body> div id="parent"> div id="child">Вертикально центрирован. div> div> body> html>

Не работает со старыми версиями IE. Добавьте child .

Используйте свойство line-height

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

Пример

html> html> head> title>Заголовок документа title> style> p < height: 90px; line-height: 90px; text-align: center; border: 3px dashed #1c87c9; > style> head> body> p>Вертикально центрирован. p> body> html>

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

Пример

html> html> head> title>Заголовок документа title> style> div < display: inline-block; width: 100%; height: 200px; vertical-align: middle; line-height: 200px; text-align: center; border: 3px dashed #1c87c9; > style> head> body> div>Вертикально центрирован. div> body> html>

Задайте равные верхние и нижние отступы

В этом методе верхние и нижние отступы родительского элемента будут равными

Пример

html> html> head> title>Заголовок документа title> style> .center < padding: 10% 0; border: 3px dashed #1c87c9; > style> head> body> div class="center"> p>Вертикально центрирован. p> div> body> html>

Если нужно задать отступы, используйте %. Данный метод требует некоторые вычисления, чтобы понять, какие значения необходимо установить для top и bottom для их динамического роста. Если установить относительную высоту, вычисления не потребуются.

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

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

1. Задайте #parent и #child
2. Задайте top: 50%; и left: 50%; для центрирования левого края child .
3. Задайте child и таким образом, чтобы он перемещался вверх и налево.
4. Установите отрицательное поле, оно уменьшает наполовину высоту и толщину.

Пример

html> html> head> title>Заголовок документа title> style> .parent < position: relative; width: 100%; height: 220px; background: #1faadb; color: #fff; > .child_1, .child_2 < position: absolute; top: 50%; left: 50%; width: 110px; height: 70px; background: #8ebf42; text-align: center; > .child_1 < margin: -35px 0 0 -55px; > style> head> body> div class="parent"> div class="child_1">Вертикально центрированный текст. div> div> br> div class="parent"> div class="child_2">Нецентрированный текст. div> div> body> html>

Если контент становится больше контейнера, он визуально исчезнет.

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

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

1. Задайте parent и child
2. Задайте child
3. Задайте 4 margin: auto; все поля станут равными и child станет центрированным по вертикали, а также по горизонтали.

Пример

#parent < position: relative; > #child < position: absolute; top: 50%; left: 50%; width: 50%; height: 30%; margin: -15% 0 0 -25%; >

Данный метод не работает в IE7.

Задайте свойство transform

Если мы имеем position: absolute; left: 50%; top: 50%;, вычисления делаются с левого верхнего угла. Для центрированного позиционирования текста необходимо переместить текст на -50% налево и на 50% вверх с помощью transform: translate (-50%;-50%).

Пример

html> html> head> title>Заголовок документа title> style> .parent < position: relative; width: 100%; height: 220px; background: #1faadb; color: #fff; > .child_1, .child_2 < position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; padding: 5px; background: #8ebf42; text-align: center; > .child_1 < transform: translate(-50%, -50%); > style> head> body> div class="parent"> div class="child_1">Вертикально центрированный текст. div> div> br> div class="parent"> div class="child_2">Нецентрированный текст. div> div> body> html>

Используйте floater div

Этот метод требует пустой div, который будет floated.

Этот метод требует пустой div.

1. Float: floater слева или справа.
2. Задайте Height: 50%;
3. Пустой дочерний элемент.
4. Очистите child , используя clear: property.

Необходимо выставить дочерний элемент на расстоянии, равной половину высоты. Для этого нужно задать отрицательные значения свойства margin-bottom: на floater

Пример

#parent < height: 200px; > #floater < float: left; width: 100%; height: 50%; margin-bottom: -50px; outline: 2px solid #1c87c9; > #child < clear: both; height:100px; outline: 2px solid #8ebf42; >

Не забудьте про пустой div и задайте высоту для дочернего элемента.

Выравнивание формы по центру на css

Добрый день, такая проблема, сделал форму входа. По горизонтали по центру выровнял с помощью margin: 0 auto; . Но по вертикали не выровнять, как сделать по центру (вертикали)?

Отслеживать
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
задан 5 мар 2016 в 14:46
169 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков

4 ответа 4

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

.modal

Отслеживать
ответ дан 6 мар 2016 в 19:26
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

top: calc(50% - высота_блока/2); left: calc(50% - ширина_блока/2); 

Отслеживать
ответ дан 6 мар 2016 в 18:02
random2093847 random2093847
872 4 4 серебряных знака 17 17 бронзовых знаков

Разобрался, может кому понадобится, добавил:

position: fixed; top: 50%; left: 50%; margin-top: -. ; margin-left: -. ; Вместо точек размер блока / на 2.

Отслеживать
ответ дан 5 мар 2016 в 15:04
169 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков

Укажите у родителя

display: flex; // FlexBox align-items: center; // выравнивает по вертикали justify-content: center; //выравнивает по горизонтали 

Отслеживать
ответ дан 6 мар 2016 в 19:39
Kuat Mustafin Kuat Mustafin
692 4 4 серебряных знака 11 11 бронзовых знаков

• html
• css

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

Похожие

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

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

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

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

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

Как выровнять input по центру?

не получается выровнять по центру форму. Уже всё попробовал. Flex использовать не вариант. Так же не получается сделать кнопку по ширине input-ов или тоже разместить по центру.

form < display: block; background: #5B3C67; padding: 50px; width: 100%; color: white; margin-right: auto; margin-left: auto; >form input < text-align: center; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 23%; height: 15px; border: 1px solid #ff8c00; >.button < width: 20%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; >.button:hover

Свяжитесь с нами

Отслеживать
задан 5 июн 2019 в 18:23
Daniil Kedrov Daniil Kedrov
564 1 1 золотой знак 5 5 серебряных знаков 12 12 бронзовых знаков

3 ответа 3

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

не нужно добавлять у самих input-ов text-align:center, полезнее у родителя:

form

по поводу одинаковой ширины — определить у input и button

width: 25%; 

только еще у input добавить

box-sizing: border-box; 

чтобы padding не влияли на ширину

form < display: block; background: #5B3C67; padding: 50px; width: 100%; color: white; margin-right: auto; margin-left: auto; text-align: center; >form input < box-sizing: border-box; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 25%; height: 35px; border: 1px solid #ff8c00; >.button < width: 25%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; >.button:hover

Свяжитесь с нами

Отслеживать
ответ дан 5 июн 2019 в 18:37
2,336 2 2 золотых знака 9 9 серебряных знаков 20 20 бронзовых знаков

.center < display: flex; justify-content: center; margin: 0 auto; padding: 10px 20px; >form < background: #5B3C67; padding: 50px; color: white; margin-right: auto; margin-left: auto; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; >form input < text-align: center; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 23%; height: 15px; border: 1px solid #ff8c00; width: 150px; >.button < width: 20%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; width: 200px; >.button:hover

Свяжитесь с нами

Отслеживать
ответ дан 5 июн 2019 в 18:45
353 1 1 серебряный знак 9 9 бронзовых знаков
Тоже как вариант, спасибо
5 июн 2019 в 19:02

Разобрался. Надо было добавить:

form input

Отслеживать
ответ дан 5 июн 2019 в 18:37
Daniil Kedrov Daniil Kedrov
564 1 1 золотой знак 5 5 серебряных знаков 12 12 бронзовых знаков
Можно просто margin: auto; .
5 июн 2019 в 18:46

• html
• css
• css3

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

Похожие

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

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

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

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

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

Каскадні таблиці стилів CSS поради & прийоми

Найпоширеніший і (тому) найлегший тип центрування — це центрування рядків тексту в абзаці або заголовку. Для цього CSS має властивість ‘text-align’:

P < text-align: center >H2

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

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

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

Іноді центрировать потрібно не текст, а блок в цілому. Або, по-іншому кажучи: ми хочемо, щоб праве і ліве поля були однаковими. Для цього потрібно встановити поля на ‘auto’. Це зазвичай використовується для блоків з фіксованою шириною, тому що якщо блок сам по собі гнучкий, він просто займе всю доступну ширину. Ось приклад:

P.blocktext < margin-left: auto; margin-right: auto; width: 6em >. Цей доволі .

Цей досить вузький діапазон тексту центровано. Зауважте, що рядки всередині блоку не центровані (вони вирівняні вліво), на відміну від попереднього прикладу.

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

IMG.displayed < display: block; margin-left: auto; margin-right: auto >.

Наступне зображення центровано:

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

CSS рівня 2 не має властивість вертикального центрування. Ймовірно, воно з’явиться у версії CSS рівня 3 (див. нижче ). Але навіть в CSS2 ви можете центрувати блоки вертикально за допомогою комбінування декількох властивостей. Хитрість полягає в тому, щоб вказати, що зовнішній блок повинен бути відформатований як осередок таблиці, тому що вміст комірки таблиці може бути вирівняно по центру вертикально.

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

DIV.container < min-height: 10em; display: table-cell; vertical-align: middle >. 
Цей маленький абзац.
 

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

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

Рівень 3 CSS пропонує і інші можливості. На момент написання цієї статті (2014 рік), гарний спосіб вертикального вирівнювання блоку без використання абсолютного позиціонування (що може призводити до часткового перекриття тексту) все ще обговорюється. Але якщо вам відомо, що часткове перекриття тексту не стане проблемою в вашому документі, ви можете використовувати властивість ‘transform’, щоб вирівняти по центру абсолютно позиційований елемент. Наприклад:

Цей абзац вирівняний вертикально по центру.

Для документа, який виглядає ось так:

Цей абзац…
 

таблиця стилів виглядає так:

div.container3 < height: 10em; position: relative > /* 1 */ div.container3 p < margin: 0; position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) > /* 4 */

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

Нещодавно (починаючи приблизно з 2015-го року) в декількох реалізаціях CSS стала доступна нова техніка. Вона заснована на новому ключовому слові ‘flex’ для властивості ‘display’. Це ключове слово призначене для використання в графічному інтерфейсі користувача (GUI), але ніщо не заважає вам використовувати його в документі, якщо у цього документа правильна структура.

Цей абзац вирівняний по центру вертикально.

таблиця стилів виглядає наступним чином:

div.container5 < height: 10em; display: flex; align-items: center > div.container5 p

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

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

Побічний ефект абсолютного позиціонування абзацу полягає в тому, що абзац стає рівно таким широким, яким він повинен бути (якщо тільки ми явно не вкажемо ширину). У прикладі нижче ми саме цього і хочемо: ми розміщуємо по центру абзац з одного слова («Центр!»), Так що ширина абзацу повинна бути рівна ширині цього слова.

Жовтий фон наочно демонструє, що абзац дійсно тієї ж ширини, що і його вміст. Ми маємо на увазі, що розмітка залишилася колишньою:

Центр!
 

У плані вертикального центрування ця таблиця стилів схожа з таблицею з попереднього прикладу. Але тепер ми ще рухаємо елемент навпіл через контейнер за допомогою правила ‘left: 50%’ і одночасно зрушуємо його вліво на половину своєї власної ширини в перетворенні ‘translate’:

div.container4 < height: 10em; position: relative >div.container4 p < margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) >

Наступний приклад пояснює, навіщо потрібно правило ‘margin-right: -50%’.

Коли форматер CSS підтримує ‘flex’, все стає ще легше:

з цією таблицею стилів:

div.container6 < height: 10em; display: flex; align-items: center; justify-content: center > div.container6 p

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

Центрування в області перегляду в CSS рівня 3

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

   
Красиво вирівняний по центру
 
Цей текстовий блок вирівняний вертикально по центру. 
І горизонтально, якщо вікно досить широке.
 

Ви можете побачити результат в окремому документі.

Правило ‘margin-right: -50%’ необхідно для компенсації ‘left: 50% ‘. Правило ‘left’ зменшує доступну для елемента ширину на 50%. Тому визуализатор намагатиметься зробити лінії завдовжки не більше половини ширини контейнера. Вказавши на те, що праве поле елемента знаходиться правіше на ту ж саму величину, відзначимо, що максимальна довжина лінії знову дорівнює ширині контейнера.

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

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

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 5 May 2001;
Last updated ср, 06-січ-2021 05:40:49 +0000