Css центрирование текста: Центрирование горизонтальное и вертикальное

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.

Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.

Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.

Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.

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

Для блочных элементов свойство vertical-align не работает.

Есть два способа, как можно выйти из этой ситуации:

Для тех, кто предпочитает все смотреть в видео:

Для тех, кто любит текст, читайте ниже способ решения этой проблемы.

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

Способ Б. Использовать своство display:table-cell;

Все было бы хорошо, но старые браузеры не поддерживают display:table-cell, особенно IE с версии 7 и ниже.

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

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

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

Кроме того, есть ситуации, в которых можно обойтись вообще без использования display:table-cell.

Ситуация 1. Выравнивание одной строки текста.

Рассмотрим простой пример.

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

Этот способ хорошо работает, когда у вас всего одна строка с текстом.

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

Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.

Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.

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

Приветствую вас на сайте Impuls-Web!

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

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

Навигация по статье:

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег

и задаем для него стиль vertical-align:middle;

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

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

css — Центрирование текста только на мобильных устройствах

Я довольно новичок в продвинутом CSS. У меня есть пользовательский раздел заголовка, который я хочу сделать сосредоточенным только на мобильном телефоне. Я добавил имя класса и следующий код, но ничего не произошло.

.mobile-text {
  text-align: right;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

Это домашняя страница этого сайта, а абзац следующий:

НЕДВИЖИМОСТЬ, КОТОРАЯ ВЫЗЫВАЕТ НОРМЫ И ЛИШИТ ОЖИДАНИЯ. ЭТО ЦВЕТНОЕ МЫШЛЕНИЕ В ЧЕРНОМ И БЕЛОМ МИРЕ.

2

Connie 28 Янв 2020 в 16:21

4 ответа

Лучший ответ

Ваш класс на сайте — . mobile-text

Кроме того, ваши встроенные стили в элементе (style=font-size: 35px... etc) перезаписывают ваши изменения — вы можете использовать !important для ленивой обработки

.mobile-text {
  text-align: right !important;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center !important;
  }
}

0

Shiny 28 Янв 2020 в 13:28

max-device-width нацеливается на ширину всей области устройства (т. Е. Экрана устройства). Вместо этого используйте max-width, который нацелится на ширину всей области браузера.

@media (max-width: 600px) {
  .
  mobile-text {
    text-align: center;
  }
}

Примечание. device-width запросы устарели.

1

Carl Edwards 28 Янв 2020 в 13:43

Ваш медиа-запрос не работает на рабочем столе, если вы проверяете в представлении рабочего стола.

А также ваше class объявление неверно, удалите . из mobile-text. 🙂

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Пожалуйста, используйте @media all и (max-width: 600px) {}

Для получения более подробной информации, пожалуйста, посетите здесь

Надеюсь, это поможет вам. 🙂

0

jaydeep patel 28 Янв 2020 в 13:34

Когда я проверяю html вашей страницы, я вижу class="" этого <h5>:

class="vc_custom_heading . mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

В вашем css вы хотите манипулировать им, используя класс .mobile-text. Проблема в том, что вы определяете этот класс в своем html с помощью .mobile-text. Это на самом деле неправильно, вам нужно определить его только

class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

. на самом деле является селектором css для такого класса, как #, является селектором для идентификатора.

0

johannchopin 28 Янв 2020 в 13:29

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

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

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

Для начала необходимо будет сбросить установленные по умолчанию браузерами расстояния. У каждого браузера есть встроенные таблицы стилей, которые загружаются автоматически и являются основой для любых других таблиц стилей. У Firefox, например, по умолчанию значение margin для тега body равняется 8-ми пикселям. Ниже представлен самый простой способ обнулить все необходимые для нашего примера значения.

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

 *{     margin:0;
        padding:0;
  }

Я буду использовать для нашего урока слой с идентификатором “wrapper”. Вы можете задать любую ширину (но помните о расширении мониторов Ваших посетителей). Я решил сделать ширину 960 пикселей, что подходит для разрешений выше средних (1024?768).

Для начала мы назначим слою #wrapper стиль, который будет центрировать его в браузере. Это сделано используя параметр margin. Не забудьте указать ширину слоя #wrapper или же элемент не будет центрирован. Трудно центрировать то, что занимает 100% ширины. Для удобства тестирования Вам необходимо также назначить другой цвет фона и высоту к слою #wrapper. Это поможет Вам увидеть результат.

#wrapper{
    width:960px;
    margin:0 auto;
        }

С Internet Explorer не все так просто. Для правильного результата нам необходимо добавить еще следующий стиль (необходимо выровнять текст по центру, для того чтоб слой выравнялся по центру в Internet Explorer):

body{
    text-align:center; /*For IE6 Shenanigans*/
    }

Тег body включает в себя wrapper, и поэтому выравнивание текста передается и на него. Обычно необходимо, чтоб текст был слева, поэтому нам необходимо добавить это условие в стиль #wrapper:

#wrapper{
    width:960px;
    margin:0 auto;
    text-align:left;
       }

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

 *{
    margin:0;
    padding:0;
    }
 body{
        text-align:center; /*For IE6 Shenanigans*/
     }

     #wrapper{
        width:960px;
        margin:0 auto;
        text-align:left;
     }

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

it-swarm.com.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

Как вертикальное выравнивание элементов в 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить центрированный текст к середине <hr /> -подобной строки

выравнивание по центру фиксированной позиции 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: Как вы можете выровнять кнопку внизу и список сверху?

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

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

Центрирование в CSS — OLDESIGN.RU

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

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

Строчные элементы (тексты, ссылки) с типом отображения inline, inline-block, inline-table, inline-flex, внутри родительского блочного можно центрировать так:
 

.center-children {
  text-align: center;
}
 

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

.center-me {
  margin: 0 auto;
}

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

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

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

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

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

Элемент строчного типа помещающийся в одну строку:

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

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

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

.  center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

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

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

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

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

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

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

Блочный элемент с фиксированной высотой

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

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

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

Блочный элемент с не фиксированной высотой

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

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

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

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

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

Элемент с фиксированной высотой и шириной.
 

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

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

Элемент с нефикированной высотой и шириной.
 

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

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

Flexbox
 

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

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Как использовать CSS для центрирования изображений и других объектов HTML

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

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

• Центр текста
• Центрировать элемент уровня блока (например, деление)
• Центрировать изображение
• Вертикально отцентрировать блок или изображение

Не используйте элемент HTML <center> для центрирования изображений и текста; это устарело, и современные веб-браузеры больше не поддерживают его. Это, в значительной степени, является ответом на четкое разделение структуры и стиля в HTML5: HTML создает структуру, а CSS диктует стиль. Поскольку центрирование является визуальной характеристикой элемента (как он выглядит, а не как он есть), этот стиль обрабатывается с помощью CSS, а не HTML. Вместо этого используйте CSS, чтобы ваши страницы отображались правильно и соответствовали современным стандартам.

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

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

. center { 
text-align: center; 
}

С этой строкой CSS каждый абзац, написанный с помощью класса .center, будет центрирован горизонтально внутри его родительского элемента. Например, абзац внутри подразделения (дочерний элемент этого подразделения) будет центрирован горизонтально внутри <div>.

Вот пример этого класса, примененного в документе HTML:

<p class = "center"> Этот текст центрирован. </ p>

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

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

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

Блоки содержимого создаются с использованием элемента HTML <div>. Наиболее распространенный способ центрировать блоки с помощью CSS — установить для левого и правого полей значение auto.

.center { 
margin: auto; 
ширина: 80 мкм; 
}

Этот сокращенный CSS для свойства margin устанавливает верхнее и нижнее поля равным 0, в то время как левый и правый будут использовать «auto». По сути, это занимает любое доступное пространство и равномерно делит его между двумя сторонами окна области просмотра, эффективно центрируя элемент на странице.

Вот это применяется в HTML:

<div class = "center"> Весь этот блок центрирован, 
но текст внутри него выровнен по левому краю. </ div>

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

Центрирование изображений с помощью CSS

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

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

img.center { 
display: block; 
поле слева: авто; 
поле справа: авто; 
}

А вот HTML-код для изображения, которое будет отцентрировано:

<img src = "blwebcam-sample. jpg" alt = "Suni" class = "center">

Вы также можете центрировать объекты, используя встроенный CSS (см. Ниже), но этот подход не рекомендуется, потому что он добавляет визуальные стили к вашей HTML-разметке. Помните, стиль и структура должны быть отдельными; добавление стилей CSS в HTML нарушит это разделение, и, как таковое, вы должны избегать его, когда это возможно.

<div style = "text-align: center;">

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

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

Вертикальное выравнивание работает аналогично горизонтальному выравниванию, описанному выше. Свойство CSS выровнено по вертикали, вот так:

.vcenter { 
вертикальное выравнивание: среднее; 
}

Все современные браузеры поддерживают этот стиль CSS . Если у вас есть проблемы со старыми браузерами, W3C рекомендует центрировать текст вертикально в контейнере. Для этого поместите элементы внутри содержащего элемента, такого как div , и установите для него минимальную высоту. Объявите содержащий элемент как ячейку таблицы и установите вертикальное выравнивание на «середину».

Например, вот CSS:

.vcenter { 
min-height: 12em; 
дисплей: таблица-ячейка; 
выравнивание по вертикали: среднее; 
}

<div class = "vcenter"> 
<p> Этот текст расположен по центру вертикально в поле. </ p> 
</ div>

Вертикальное центрирование и старые версии Internet Explorer

Вы можете принудительно центрировать Internet Explorer (IE), а затем использовать условные комментарии, чтобы только IE видел стили, но они немного многословны и непривлекательны. Однако решение Microsoft от 2015 года об отказе от поддержки более старых версий IE сделает это проблемой, поскольку IE перестает использоваться.

Центрирование текста Использование CSS не работает в IE

Центрирование текста Использование CSS не работает в IE

У меня проблемы с отображением текста в таблице в IE.

В Firefox 2, 3 и Safari все работает нормально, но по какой-то причине текст не отображается по центру в IE 6 или 7.

Я использую:

 h3 {
  font: 300 12px "Helvetica", serif; 
  text-align: center; 
  text-transform: uppercase;
}
  

Я также попытался добавить margin-left:auto; , margin-right:auto и position:relative;

безрезультатно.

Размещено : 1 January, 2009 @ 00:00

Ячейка таблицы нуждается в выравнивании текста: центр.

Размещено : 16 September, 2008 @ 01:41

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

Интересно, у IE просто фиктивная слюна в том объявлении font , которое у вас там есть?

Размещено : 16 September, 2008 @ 01:45

Используйте text-align: center в div / td, который окружает h3.

 <table style = "width:400px;border:solid 1px;">
    <tr>
        <td style = "text-align:center;"><h3>hi</h3></td>
    </tr>
</table>
  

edit: вау, сообщество stackoverflow довольно быстрое!

Размещено : 16 September, 2008 @ 01:46

CSS-свойство text-align должно быть объявлено в родительском элементе, а не в элементе, который вы пытаетесь отцентрировать. IE использует свойство text-align: center для центрирования текста. Firefox использует margin: 0 auto, и он должен быть объявлен для элемента, который вы пытаетесь центрировать.

 <div>
    <h3>Some text</h3>
</div>
  

Размещено : 16 September, 2008 @ 01:52

Спасибо, Алекс … Решил главную проблему.

Размещено : 28 May, 2013 @ 04:21

Возможно, это опечатка, но здесь вам не хватает точки с запятой:

 margin-left:auto; margin-right:auto position:relative;
  

Должно быть:

 margin-left:auto; margin-right:auto; position:relative;
  

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

Размещено : 16 September, 2008 @ 01:56

Если вы можете / хотите использовать flexbox, вы также можете использовать следующее.

 display: flex;
justify-content: center;
align-items:center
  

Размещено : 26 October, 2017 @ 13:43

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

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

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

  дисплей: гибкий;
justify-content: center; / * выравниваем по горизонтали * /
align-items: center; / * выравниваем по вертикали * /
  

  .box {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 24 пикселя;
  стиль шрифта: наклонный;
  цвет: #FFF;
  выравнивание текста: центр;
  отступ: 0 20 пикселей;
  маржа: 20 пикселей;
  дисплей: гибкий;
  justify-content: center;
  / * выравниваем по горизонтали * /
  align-items: center;
  / * выравниваем по вертикали * /
}  

  

  Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh
  

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

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

  .box {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 24 пикселя;
  стиль шрифта: наклонный;
  цвет: #FFF;
  выравнивание текста: центр;
  отступ: 0 20 пикселей;
  маржа: 20 пикселей;
  дисплей: гибкий;
}
.box span {
  маржа: авто;
}  

  

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

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

 .коробка {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 18 пикселей;
  стиль шрифта: наклонный;
  цвет: #FFF;
  дисплей: гибкий;
  flex-direction: столбец;
  justify-content: center;
  / * выравнивает элементы по вертикали * /
  align-items: center;
  / * выравнивает элементы по горизонтали * /
}
п {
  маржа: 5 пикселей;
  }  

  

  

    Когда flex-direction является столбцом ...
  
  

    "justify-content: center" - выравнивает по вертикали.
  
  

    "align-items: center" - выравнивает по горизонтали
  
  

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

  дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -moz-box;
дисплей: -ms-flexbox;
дисплей: гибкий;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
  

  
 Lorem ipsum dolor sit amet ... 
  

  
 Lorem ipsum dolor sit amet ... 
  

  
 Lorem ipsum dolor sit amet... 
  

  
 Lorem ipsum dolor sit amet ... 
  

  
 Lorem ipsum dolor sit amet ... 
  

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ textAlign: ['наведите', 'фокус'],
      }
    }
  }  

 
  модуль.export = {
    corePlugins: {
      
+ textAlign: ложь,
    }
  }  

 
  td {
выравнивание текста: центр;
вертикальное выравнивание: сверху;
}  
 

 









<таблица>

 По умолчанию 
 id = "example1" > Левый 
 id = "example2" > Центр 
 id = "example3" > Правый 





 
 

 









<таблица>

 По умолчанию 
 id = "example4" > Вверху 
 id = "example5" > Средний 
 id = "example6" > Внизу 





 
 

 









<таблица>

 Это пример текста... 
 id = "example7" > Это пример текста ... 





 
 

 









 id = "example8" >

 abcdefg 
 hijklmn 
 opqrstu 
 vwxyz 



<таблица>

 abcdefg 
 hijklmn 
 opqrstu 
 vwxyz 





 
 

 body {font-size: 14px;}
* .box {положение: абсолютное; ширина: 100%; граница: 1px solid # 8b0000;
  верх: 50%; слева: 0; выравнивание текста: центр;} 

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

 body {font-size: 14px;}
* .box {положение: абсолютное; ширина: 100%;
  граница: 1px solid # 8b0000;
  верх: 50%; слева: 0; справа: 0; выравнивание текста: центр;} 

 body {font-size: 14px;}
* .box2 {позиция: абсолютная; высота: 200 пикселей; ширина: 200 пикселей; border: 1px solid # 8b0000;}
* .textbox {позиция: абсолютная; выравнивание текста: центр; верхнее поле: 92 пикселя;
  высота: 100%; width: 100%;} 

 

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

 

 body {font-size: 14px;}
* .box2 {позиция: абсолютная; высота: 200 пикселей; ширина: 200 пикселей; border: 1px solid # 8b0000;}
* .imagebox {позиция: абсолютная; выравнивание текста: центр; маржа сверху: 81px;
  высота: 100%; width: 100%;} 

 
 





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





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











 

  

  Мой заголовок
  

  

  Мой заголовок
  

  

  Мой заголовок
  

  

 Икс
  

  

 Z
  

  

 Y
  

<стиль> .track-the-tracking {ширина: 100%; выравнивание текста: центр; margin: 1rem 0;} .track-the-tracking h3 {letter-spacing: 1.5rem;} 

 
 123454321 
 
 0 

 

& nbsp;
 

 
 & nbsp; 123454321 
 
 

.proper-centering {
    дисплей: встроенный блок;
    межбуквенный интервал: 20 пикселей;
    отступ слева: 20 пикселей;
}
 

<стиль>
.track-the-tracking2 {
    ширина: 100%;
    выравнивание текста: центр;
}
.track-the-tracking2 h3.proper-centering {
    дисплей: встроенный блок;
    межбуквенный интервал: 1,5 бэр;
    отступ слева: 1,5 бэр;
}


 
 123454321 
 
 0 

 

a.centered-text {
    дисплей: встроенный блок;
    межбуквенный интервал: 0,7 бэр;
    набивка: .8rem .3rem .8rem 1rem;
}