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, и он должен быть 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. Это на самом деле неправильно, вам нужно определить его только 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

Главная » Шпаргалка » PHP MYSQL javascript » 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

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

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

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

Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.
 

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

 

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


 

Строчные элементы (тексты, ссылки) с типом отображения 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 или применить flexbox:
 

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

 

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


 

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

.

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

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

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

Выравнивание текста - Попутный ветер CSS

Использование

Управляйте выравниванием текста элемента с помощью .text-left , .text-center , .text-right и .text-justify .

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum conquuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

  

Lorem ipsum dolor sit amet ...

Lorem ipsum dolor sit amet, conctetur adipisicing elit.Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum conquuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

  

Lorem ipsum dolor sit amet ...

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum conquuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

  

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum conquuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

  

Lorem ipsum dolor sit amet ...

Адаптивный

Чтобы управлять выравниванием текста элемента в определенной точке останова, добавьте префикс {screen}: к любому существующему выравниванию текста полезность.Например, используйте md: text-center , чтобы применить утилиту text-center только для средних размеров экрана и выше.

  

Lorem ipsum dolor sit amet ...

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

Варианты

По умолчанию для утилит выравнивания текста создаются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит выравнивания текста, изменив свойство textAlign в разделе вариантов вашего попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

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

Если вы не планируете использовать утилиты выравнивания текста в своем проекте, вы можете полностью отключить их, установив для свойства textAlign значение false в разделе corePlugins вашего файла конфигурации:

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

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

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

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

Для вертикального выравнивания отдельной строки текста необходимо использовать свойство line-height.

Привет, мир

Привет, Livecoding!

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

Hello World

Привет, Livecoding!

CSS для достижения этого выглядит следующим образом:

#vertical { высота: 90 пикселей; высота строки: 90 пикселей; выравнивание текста: центр; граница: сплошной зеленый цвет 5 пикселей; }

#vertical {

height: 90px;

высота строки: 90 пикселей;

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

граница: сплошной зеленый 5 пикселей;

}

Обработка нескольких строк текста

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

Привет, мир

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

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

Hello World

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

< / body>

CSS

#vertical { высота: 150 пикселей; высота строки: 150 пикселей; выравнивание текста: центр; граница: сплошной зеленый цвет 5 пикселей; } охватывать { дисплей: встроенный блок; вертикальное выравнивание: по центру; высота строки: нормальный; }

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

22

23

#vertical {

height: 150 пикселей;

высота строки: 150 пикселей;

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

граница: сплошной зеленый 5 пикселей;

}

диапазон {

дисплей: встроенный блок;

vertical-align: middle;

высота строки: нормальная;

}

Итак, как все это работает?

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

Второй метод может быть немного сложнее.Однако он отлично работает во всех браузерах. У вас есть что добавить к учебнику? Если да, то не забудьте оставить комментарий ниже.

Вы также можете проверить на нашем веб-сайте видеоролики о HTML / CSS. Ниже приведены несколько примеров:

  • Создание темы WordPress (часть 8) - CSS
  • HTML5: Создание современного веб-сайта (часть 4) - HTML-CSS

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

Элайджахвасс99

МаркТаннус

Еще один отличный способ узнать что-то интересное о HTML / CSS - это зайти на страницу нашего проекта!

CSS Properties / Table Styles / выравнивание в ячейках

выравнивание текста: ***; вертикальное выравнивание: ***;

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

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

 
  td {
выравнивание текста: центр;
вертикальное выравнивание: сверху;
}  
 
Имущество Значение Пояснение
выравнивание текста
(по горизонтали)
слева выравнивается по левому краю
центр выравнивается по центру
правый выравнивается по правому краю
оправдать выравнивает текст
с выравниванием по вертикали
(по вертикали)
исходный совпадает с базовой линией
верх совпадает с верхним
средний выравнивается по середине
низ выравнивается по низу

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

О базовом уровне

Пример

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


 Указатель ТЕГОВ 






<таблица>

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





 
 
Выход
По умолчанию Левый Центр Правый
Центровка вертикальная
 


 Указатель тегов 






<таблица>

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





 
 
Выход
По умолчанию Топ Середина Низ
Обосновывает текст
 


 Указатель тегов 






<таблица>

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





 
 
Выход
Это пример текста. Свойство text-align определяет горизонтальное выравнивание текста. Значение выравнивания регулирует пробелы между словами для выравнивания как левой, так и правой стороны. Это пример текста. Свойство text-align определяет горизонтальное выравнивание текста. Значение выравнивания регулирует пробелы между словами для выравнивания как левой, так и правой стороны.
Выровнено по базовой линии (сравнение с «верхним» значением)
 


 Указатель тегов 






 id = "example8" >
abcdefg hijklmn opqrstu vwxyz
<таблица> abcdefg hijklmn opqrstu vwxyz
Выход
abcdefg часов opqrstu vwxyz
abcdefg часов opqrstu vwxyz
Стили таблиц
Связанный документ

Вертикальное центрирование | Советы по веб-дизайну и разработке

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

18 ноября 2009 г., 12:00

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

на странице

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

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

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

CSS

Текст перемещается в середину страницы по вертикали, устанавливая top: 50%, и перемещается в центр страницы, устанавливая width: 100% и text-align: center. Я добавил рамку блока, чтобы было легче видеть, что происходит на странице.

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

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

 
Вертикально центрированный текст
Как это выглядит

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

Изображение создается так же, как и текст, за исключением того, что вместо текста вы предоставляете изображение.

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

В коробке

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

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

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

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

CSS

Текст вложен в рамку с фиксированной высотой и шириной. Для текстового поля установлено значение 100% высоты и ширины родительского поля. Значение верхнего края поля рассчитывается для текстового поля путем уменьшения вдвое фиксированной высоты родительского (200 пикселей / 2 пикселей = 100 пикселей) и вычитания половины высоты font-size (100 пикселей - 7 пикселей = 93 пикселей) и вычитания ширина границы (93px - 1 px = 92px) .

Примечание. Для работы в Internet Explorer как box2, так и textbox необходимо использовать абсолютное позиционирование.

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

Текстовое поле вложено в родительский блок с фиксированной высотой и шириной. Параметр верхнего поля текстового поля центрирует его по вертикали в пределах его родительского поля.

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

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

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

CSS

Значение верхнего края поля составляет половину родительской высоты (200 пикселей / 2 пикселей = 100 пикселей) минус половина высоты изображения (100 пикселей - 19 пикселей = 81 пикселей) .

Примечание. Для работы в Internet Explorer как box2, так и textbox необходимо использовать абсолютное позиционирование.

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

Код

Исходный код

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




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

Нравится:

Нравится Загрузка ...

Связанные

Запись подана в разделе "Советы по дизайну", "Посмотреть все".Теги: центрирование, css, вертикальное центрирование.

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

Введение

Назад во времена HTML 3.x и переходных вариантов HTML 4.x и XHTML 1.0 ряд элементов поддерживал выровнять атрибут . Как он действовал, зависело от того, в каком элементе он был применен, и прямого перевода для CSS нет. Как ты центр элементов зависит от типа элемента.

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

Встроенное содержимое

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

  

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

Да, плохо названо."inline-align", вероятно, был бы лучшим выбором.

Уточнение: хотя свойство text-align применяется к

, содержимое, которое оно позиционирует, является текстом внутри элемента, а не самим элементом.

Содержание уровня блока

Контент уровня блока включает такие элементы, как

,

,

, <таблица> и

. На уровень центрального блока элементы устанавливают свои левое и правое поля на auto (но см. IE Ошибки).

  

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

Однако ширина по умолчанию для большинства элементов уровня блока - auto, который заполняет доступную область на экране. Просто быть центрированным помещает это в том же положении, что и выравнивание по левому краю. Если хотите, чтобы это было визуально по центру вы должны установить ширину (или max-width , хотя Internet Explorer 6 и более ранние версии этого не делают поддерживают это, а IE 7 поддерживает это только в стандартном режиме).

  

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

Встроенное содержимое и блок, в котором оно находится

Распространенная ошибка, которую делают люди после прочтения этой статьи, - это думать, что "Я хочу центрировать текст внутри моего

, это блок, поэтому я необходимо изменить поля.". Тогда для пояснения повторю:

текст - это встроенный контент.

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

Верхний элемент (X) имеет встроенное содержимое по центру. По умолчанию большинство элементов уровня блока,

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

  

Икс

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

  

Z

Средний элемент (Y) имеет внутреннее содержимое по центру и сосредоточился на блочной технике.

  

Y

Ошибки Internet Explorer и содержимое уровня блокировки

К сожалению, наиболее часто используемый браузер на рынке - Microsoft Internet Explorer для Windows - имеет довольно серьезную ошибку относительно обработки элементов уровня блока и полей.В зависимости от в версии и режиме он может обрабатывать такие элементы как встроенный контент относительно центрирования. IE использует режим, основанный на DOCTYPE. предоставленный в верхней части HTML-документа, это называется переключением типа Doctype.

Нет 7

Когда срабатывает ошибка:

  • Автоматические поля будут , а не работать
  • Text-align будет (неправильно) влиять на положение потомков блока

Если ошибка не возникает, в Internet Explorer:

  • Автоматические поля будут работать
  • Text-align будет (неправильно) влиять на положение потомков блока

В других браузерах:

  • Автоматические поля будут работать
  • Text-align , а не будет влиять на положение потомков блока

Это можно обойти, но оба метода неприятны. взломать.

Встроенный CSS-хак

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

  

NB: маржа: 1em авто; устанавливает для верхнего и нижнего поля значение 1em , а для левого и правого полей - auto .Он используется здесь, потому что расширенный пример вызывал горизонтальную прокрутку в большом количестве систем.

Взлом JavaScript

Метод, позволяющий сохранить разметку в некоторой степени более чистой, но ценой отказа при отключении JavaScript, - это сценарий исправления полей Internet Explorer Дэвида Шонцлера.

Сводка

  • левое поле: авто; маржа-право: авто; центрирует элемент уровня блока.
  • выравнивание текста: по центру; центрирует встроенное содержимое элемента уровня блока.
  • У MSIE
  • есть ошибки, из-за которых он при некоторых обстоятельствах обрабатывает содержимое уровня блока как встроенное (для центрирования).

CSS - центрирование текста с произвольным отслеживанием

Эй, вы заметили, что когда текст имеет очень широкое смещение, он не центрируется?

Видите? Проверь это. (0 - справочная точка центра)

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

123454321

0

Неправильно совмещены 5 и oOo. Фу.

Это потому, что межбуквенный интервал ставит пробел после каждой буквы, и это выглядит так:
1_2_3_4_5_4_3_2_1_
Когда это должно было быть так:
1_2_3_4_5_4_3_2_1

Есть несколько способов решить эту проблему.

лишних мест?

Вы можете добавить дополнительное пространство перед первым символом с помощью

& nbsp;
 

неразрывное пространство спереди.

& nbsp; 123454321

Так выглядит немного лучше. По крайней мере, он не так перекос в одну сторону.

Однако, как видите, 0 и 5 не совпадают должным образом.

Давай попробуем что-нибудь еще.

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

Инлайн-блоки

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

Выглядит довольно хорошо по центру, правда?

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

Так что да, вот как это выглядит:

123454321

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

в отличие от этого:

123454321

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

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

Используйте это в HTML, например:

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

123454321

0

Вот и все. Намного лучше центрированный текст.

Другие применения

Это относится ко всему с щедрым отслеживанием.Как кнопки, вот посмотрите. Это с равным отступом слева и справа. (интервал между буквами 0,7 бэр, отступ 1 бэр с обеих сторон)

Вот та же кнопка, но с отступами, отрегулированными по центру текста. (интервал между буквами 0,7 бэр, отступ 1 бэр слева и 0,3 бэр справа)

Выглядит так:

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

Теперь я знаю, что это может показаться немного придирчивым и / или незначительным.И я это понимаю. Особенно, если расстояние между буквами небольшое, например, 2 или 3 пикселя. Тогда это сложно сказать, и не многие люди замечают это. Но когда вы хотите, чтобы все выглядело «идеально по пикселям» и каждый, с кем вы работаете, улавливал каждую небольшую несогласованность (я думал, что я плохой, попробуйте работать в группе, где это ЗАДАНИЕ каждого, ха-ха), тогда это становится частью вашей обычной библиотеки миксинов SCSS . ха-ха

Так что да, наслаждайтесь хорошо центрированным текстом.



Чтобы узнать больше о CSS, ознакомьтесь с этим всеобъемлющим курсом, который охватывает все об использовании CSS с Divi! (используйте код купона "getcoursewith5off" для 5% скидки) Начните изучать правильный CSS для Divi

гифок от Giphy.

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

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

Затронутые версии
Версия Режим Появляется ошибка
4 - 5,5 нет данных Да
6-7 Причуды Да
6-7 Стандарты