Выровнять текст по центру блока css: всё о центрировании по вертикали и горизонтали / Skillbox Media

Leave a Comment / Css / By /

Содержание

css — Выравнивание текста в блоке по центру

Почему данный код не выравнивает текст по центру?

html, body {
  height: 100%;
}

.block{
  width: 20%;
  height: 100%;
  max-width: 20%;
  max-height: 50%;
  background: greenyellow;
  border-radius: 10px;
  margin-top: 50px;
  margin-left: 100px;
}

.block h5 {
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
    <h5> 
        abacaba
    </h5>
</div>
</body>
</html>

4

margin: auto; — выравнивает блок за счёт добавление отступов по краям, но так-как ваш блок на всю ширину, то отступы не добавляются, им просто не где быть.

Видно что блок во всю ширину и отступов нету.
Вариант 1
Всё таки выравнивать блок

h2, задать ему не полную ширину.

Ширина 75px и видны отступы и блок по центру, но не текст.
Вариант 2
Выравнивать сам текст внутри h2: text-align: center — выравнивает текст в блоке h2, а не сам блок.

Блок во всю ширину, но текст по центру.

margin: auto; не работает потому что элемент h5 занимает всю ширину блока .block и ей как-бы негде ставить отступ.
Если попробуйте задавать элементу h5 например width:60px; то он выравнивается по центру блока .block.

Напиши : text-align:center; в .block

2

Потому что h5 это блочный элемент и он занимает всю ширину родительского документа.

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

h5 { text-align: center; }

Ну или если обязательно нужны margin’ы, то можно так:

h5 { display: table; margin: 0 auto; }

Можете посмотреть руководство по выравниванию в CSS.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Выравнивание текста — Tailwind CSS

​Основы использования

​Настройка выравнивания текста

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

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

был морским биологом.

<p>Итак, я пошел в воду...</p>

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

<p>Итак, я пошел в воду...</p>

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

<p>Итак, я пошел в воду...</p>

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

<p>Итак, я пошел в воду...</p>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:text-center, чтобы применять утилиту text-center только при hover.

<p>
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

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

<p>
  <!-- ... -->
</p>

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

помощников по типографике | Foundation for Sites 6 Docs

Наши вспомогательные классы позволяют быстрее формировать определенные типографские стили.

Выравнивание текста

Вы можете изменить выравнивание текста элемента, добавив к элементу .text-left , .text-right

, .text-center или . text-justify .

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

Смотрите эту часть в видео

Этот текст выровнен по левому краю. Действие «Психоисториков» происходит в 0 году Э.Э. («Эра Основания»), действие «Психоисториков» начинается на Транторе, столице 12000-летней Галактической Империи. Хотя империя кажется стабильной и могущественной, она медленно распадается по пути, аналогичному закату Западной Римской империи.

Этот текст выровнен по правому краю. Действие «Психоисториков» происходит в 0 году Э.Э. («Эра Основания»), действие «Психоисториков» начинается на Транторе, столице 12000-летней Галактической Империи. Хотя империя кажется стабильной и могущественной, она медленно распадается по пути, аналогичному закату Западной Римской империи.

Этот текст выровнен по центру. Действие «Психоисториков» происходит в 0 году Э.Э. («Эра Основания»), действие «Психоисториков» начинается на Транторе, столице 12000-летней Галактической Империи. Хотя империя кажется стабильной и могущественной, она медленно распадается по пути, аналогичному закату Западной Римской империи.

Этот текст выровнен по ширине. Действие «Психоисториков» происходит в 0 году Э.Э. («Эра Основания»), действие «Психоисториков» начинается на Транторе, столице 12000-летней Галактической Империи. Хотя империя кажется стабильной и могущественной, она медленно распадается по пути, аналогичному закату Западной Римской империи.

Облегчите свои заголовки, добавив класс .subheader к любому элементу заголовка.

Смотрите эту часть в видео

  
h2.
 subheader 
 
h3.подзаголовок
 
 
h4.подзаголовок
 
 
h5.подзаголовок
 
 
h5.подзаголовок
 
 
h6.subheader

Начальный абзац

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

Смотрите эту часть в видео

 
О чем спят ваши кошки на самом деле?

О чем на самом деле спят ваши кошки?

Немаркированный список

В Foundation

    — это маркированный список, а
      — это нумерованный список по умолчанию, но вы можете добавить класс .no-bullet
      для удаления маркеров и номеров соответственно.

      Ненумерованный список

      Смотрите эту часть в видео

       <ул>
  
    1. Элемент списка с более длинным описанием или большим содержанием.
      2. 
  
    2. Элемент списка
      3. 
  
    3. Элемент списка
    <ул>
      
    4. Вложенный элемент списка
      5. 
      
    5. Вложенный элемент списка
      6. 
      
    6. Вложенный элемент списка
      7.
  • Элемент списка
  • Элемент списка
  • Элемент списка
    • Элемент списка с более длинным описанием или большим содержанием.
    • Элемент списка
    • Элемент списка
      • Элемент вложенного списка
      • Элемент вложенного списка
      • Элемент вложенного списка
    • Элемент списка
    • Элемент списка
    • Элемент списка
    Заказной список 
     
      
  
    1.  
      Элемент списка с более длинным описанием или большим содержанием.
      2. 
  
    2. Элемент списка
      3. 
  
    3. Элемент списка
    <ол>
      
    4. Вложенный элемент списка
      5. 
      
    5. Вложенный элемент списка
      6. 
      
    6. Вложенный элемент списка
      7. 
    
    
  
  
  • Элемент списка
    • 
  
  • Элемент списка
    • 
  
  • Элемент списка
    •
    1. Элемент списка с более длинным описанием или большим содержанием.
    2. Элемент списка
    3. Элемент списка
      1. Элемент вложенного списка
      2. Элемент вложенного списка
      3. Элемент вложенного списка
    4. Элемент списка
    5. Элемент списка
    6. Элемент списка

    Шкала шрифта

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

    или 9.От 0007

    до
    с использованием существующих размеров заголовков Foundation.

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

    следующим заголовком должен быть либо

    , либо

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

    Для заголовков:

     
    Lorem Ipsum Dolor
     
 
    Лорем Ипсум Долор
     
 
    Лорем Ипсум Долор
     
 
    Лорем Ипсум Долор
     
 
    Lorem Ipsum Dolor

    Для текста:

     
    Lorem Ipsum Dolor
    

    Лорем Ипсум Долор
    

    Лорем Ипсум Долор
    

    Лорем Ипсум Долор
    

    Лорем Ипсум Долор
    

    Лорем Ипсум Долор

    Лорем Ипсум Долор

    Lorem Ipsum Dolor

    Lorem Ipsum Dolor

    Lorem Ipsum Dolor

    Lorem Ipsum Dolor

    Lorem Ipsum Dolor

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

    Смотрите эту часть в видео

     
    Дней без конфликта слияния
    

    128

    Дней без конфликта слияния

    128

    Ссылка Sass

    Переменные

    Стили этого компонента по умолчанию можно настроить с помощью этих переменных Sass в файле настроек вашего проекта.

    Имя Тип Значение по умолчанию Описание
    $ Lead-Font-Size Номер Размер глобального шрифта * 1,25

    Размер шрифта по умолчанию для ведущих абзацев.

    $lead-lineheight Строка 1,6

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

    $subheader-lineheight Номер 1,4

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

    $подзаголовок-цвет Цвет тёмно-серый

    Цвет шрифта по умолчанию для подзаголовков.

    $подзаголовок-шрифт Строка $ глобальный вес нормальный

    Вес шрифта по умолчанию для подзаголовков.

    $subheader-margin-top Номер 0,2 бэр

    Верхнее поле по умолчанию для подзаголовков.

    $subheader-margin-bottom Номер 0,5 бэр

    Нижнее поле по умолчанию для подзаголовков.

    Размер шрифта $stat Номер 2,5рем

    Размер шрифта по умолчанию для статистических чисел.

    $cite-color Цвет тёмно-серый

    Цвет текста для компонента .cite-block .

    Размер шрифта $cite Номер остаточный расчет(13)

    Размер шрифта для компонента .cite-block .

    $cite-pseudo-content Строка '\2014 \0020'

    Псевдоконтент для компонента .cite-block .

    $код-цвет Цвет $ черный

    Цвет текста компонентов . code-inline и .code-block .

    $ код семейства шрифтов Строка или список $ семейство шрифтов моноширинный

    Семейство шрифтов компонентов .code-inline и .code-block .

    $код-шрифт-вес Строка $ глобальный вес нормальный

    Вес шрифта текста в .code-inline и .code-block компонентов.

    $код-фон Цвет $светло-серый

    Цвет фона компонентов .code-inline и .code-block .

    $код-граница Список 1 пикс сплошной $средне-серый

    Граница около 9Компоненты 0007 . code-inline и .code-block .

    $code-padding Номер или список остаточный расчет(2 5 1)

    Отступ вокруг текста компонента .code-inline .

    $code-block-padding Номер или список 1рем

    Отступ вокруг текста .code-block компонент.

    $code-block-margin-bottom Номер 1,5 бэр

    Маржа под компонентом .code-block .

    Миксины

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

    стиль кода 
     @include в стиле кода;

    Добавить базовые стили для помощника по коду. См. примеси code-inline и code-block .

    встроенный код 
     @include встроенный код;

    Сделать помощник по коду из встроенного миксина в стиле кода . Используется для генерации .code-inline

    кодовый блок 
     @include кодовый блок;

    Сделать помощник по коду из микса в стиле кода в блоке. Используется для генерации .code-block

    Template:Block center — Wikisource, бесплатная онлайн-библиотека

    Содержание

    • 1 Использование
      • 1.1 Параметры
        • 1.1.1 название
        • 1.1.2 ширина
        • 1.1.3 максимальная ширина
        • 1.1.4 стиль
        • 1.1.5 выровнять
    • 2 Объединение нескольких страниц
      • 2.1 Первая страница
      • 2.2 Средние страницы
      • 2.3 Последняя страница
    • 3 См. также

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

    Этот шаблон размещает блок текста в центре страницы, не влияя на выравнивание текста внутри этого блока.

    {{bc}} — это сокращенная форма этого шаблона, которая перенаправляет сюда.

    Сравнение {{Block center}} и {{Center}}

    Этот шаблон сохраняет текущее выравнивание текста (обычно слева), но перемещает весь блок текста в центр. Чтобы изменить выравнивание текста по центру, используйте вместо этого {{Center}}.

    Блок-центр

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Энейский commodo ligula eget dolor.

    Энейская масса.

    Центр

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Энейский commodo ligula eget dolor.

    Энейская масса.

    Параметры

    Все параметры являются необязательными.

    • заголовок: Название блока (необязательно)
    • ширина: ширина блока
    • max-width: максимальная ширина блока. Необязательно: по умолчанию 100%.
    • align: выравнивание текста внутри блока. Один из слева , справа , по центру , по ширине , по умолчанию не указано и поэтому наследуется от родителя.
      • Класс
    • : дополнительные классы CSS, которые можно использовать вместе с Help:Page styles CSS. Классы wst-block-center и wst-block-center-title всегда применяются к блоку и заголовку соответственно.
    • стиль: дополнительные стили CSS (предпочитайте класс, если стиль повторно используется в работе)
    заголовок

    Если необходимо указать название работы, можно использовать необязательный параметр «заголовок». Иногда это будет центрировать заголовок лучше, чем отдельная строка; в других случаях нет — обычно это зависит от того, является ли фиксированная ширина (следующий пример) принудительной или нет.

     {{block center|title=LOREM IPSUM|Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
Энейский commodo ligula eget dolor.
Энейская масса.}}

    LOREM IPSUM

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Энейский commodo ligula eget dolor.

    Энейская масса.

    ширина

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

     {{центр блока|ширина=25em|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    
Энейский commodo ligula eget dolor.
Энейская масса.}}

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Энейский commodo ligula eget dolor.

    Энейская масса.

    Примечание: это заставит ширину, даже если страница уже, чем заданная ширина, до максимума, указанного max-width, или 100%, если это не указано.

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

    max-width

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

     {{центр блока|max-width=15em|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna }}

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna

    Однако, если родительский контейнер на меньше на этого значения, блок будет уменьшаться как обычно:

     <дел>
{{центр блока|max-width=15em|
Lorem ipsum dolor sit amet, consectetur adipisicing elit
}}

    Lorem ipsum dolor sit amet, consectetur adipisicing elit

    Два параметра можно комбинировать. В этом случае ширина будет установлена ​​в соответствии с параметром ширины на маленьких экранах (ниже значения max-width), а затем будет ограничена значением max-width на больших экранах. Обратите внимание, что значение ширины должно меняться в зависимости от размера родителя, поэтому обычно это значение в процентах (часто 100%).

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

     <дел>
{{центр блока|максимальная ширина=40em|ширина=100%
|Широкий родительский элемент: применяется максимальная ширина 40em.{{-}}{{float right|''Текст справа.''}}
}}

    Широкий родитель: применяется максимальная ширина 40em.

    Текст справа. 

     <дел>
{{центр блока|максимальная ширина=40em|ширина=100%
|Узкий родитель: ширина 100 %{{-}}{{float right|''Текст справа.''}}
}}

    Узкий родитель: ширина 100 %

    Нет переполнения родителя.

    стиль

    Если необходимо указать стиль текста, можно использовать необязательный параметр «стиль». Этот параметр принимает те же атрибуты стиля, которые можно задать для любой таблицы.

     {{центр блока|style=font-style:italic|<стихотворение>
Lorem ipsum dolor sit amet,
{{gap}}конструктор adipiscing elit.
Энейский commodo ligula eget dolor;
{{gap}}Энейская масса.
}}

    Lorem ipsum dolor sit amet,
    ⁠consectetuer adipiscing elit.
    Энейский commodo ligula eget dolor;
    ⁠ Энейская масса.

    align

    Выравнивание текста внутри (общего) центрированного блока можно контролировать с помощью этого (по умолчанию: по левому краю):

     {{блок по центру|выравнивание=справа|<стихотворение>
Lorem ipsum dolor sit amet,
{{gap}}конструктор adipiscing elit.
Энейский commodo ligula eget dolor;
{{gap}}Энейская масса.
}}

    Lorem ipsum dolor sit amet,
    ⁠consectetuer adipiscing elit.
    Энейский commodo ligula eget dolor;
    ⁠ Энейская масса.

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

    Если вы используете много отдельных центров блоков, вы обнаружите, что каждая страница имеет немного различное выравнивание, однако этот шаблон нельзя оставить «висячим» и закрыть на другой странице, чтобы создать один большой центр блоков. Если у вас многостраничный блок-центр, вы можете использовать {{block center/s}} и {{block center/e}}, чтобы открывать и закрывать его на каждой странице. Каждая страница должна иметь по одному из каждого, один в начале и один в конце. Однако вы можете разместить один или оба из них в верхнем или нижнем колонтитуле, чтобы они не были включены в основное пространство имен. Когда все страницы будут включены, вы получите только один {{block center/s}} и только один {{block center/e}} в начале и конце раздела соответственно.

    Первая страница

    Заголовок

    В заголовке ничего не требуется

    Корпус
     {{центр блока/с}}
Начало текста в центре блока. 
Содержимое блочного центра идет сюда.
    Нижний колонтитул
     {{центр блока/е}}

    Средние страницы

    Заголовок
     {{центр блока/с}}
    Корпус
     Содержимое блока по центру; это продолжение предыдущей страницы.
    Нижний колонтитул
     {{центр блока/e}}

    Последняя страница

    Заголовок
     {{центр блока/с}}
    Корпус
     Содержимое блока по центру; это продолжение предыдущей страницы.
Последний бит текста в центре блока
{{центр блока/e}}
    Нижний колонтитул

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

    См. также

    • {{Центральный блок}}

    Описание отсутствует.

    [Редактировать данные шаблона]

    Параметры шаблона

    Этот шаблон предпочитает блочное форматирование параметров.

    Параметр Описание Тип Статус
    класс 9 0007 class

    дополнительные классы CSS, которые можно использовать вместе с Help:Page styles CSS.

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

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