Как выровнять текст в блоке по центру css
Перейти к содержимому

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

  • автор:

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

БлогNot. О выравнивании элементов по центру средствами HTML5 и CSS3

О выравнивании элементов по центру средствами HTML5 и CSS3

Заметим, что в самом по себе HTML5 «блочных» и «строчных» элементов, по сути, нет. Роль элементов теперь, пожалуй, чисто логическая, а визуальная структура оформления, в которой есть «блочные» и «строчные» элементы, относится только к стилям CSS.

Тем не менее, в основе идеологии CSS3 остаётся старое доброе разделение элементов HTML на 2 типа:

  • Блочный элемент (block) — то, что создает разрыв строки перед тегом и после него. Может содержать внутри себя элементы любого типа. Обычно блочные элементы не размещают внутри строчных, исключение — тег картинки .
  • Строчный (встроенный) элемент (inline) — не создаёт разрыва строки при добавлении. Строчные элементы — потомки блочных. Обычно они игнорируют верхние и нижние отступы. Задать размеры строчных элементов с помощью CSS нельзя, можно лишь увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.

С помощью CSS элементы «взаимопревращаемы»:

div < display: inline; >/*превращаем блочный элемент раздела в строчный; это приведёт к тому, что разделы начнут показываться "в строчку"*/ a < display: block; >/*превращаем строчный элемент в блочный для тега ссылки a; в нашем случае из-за этого весь блок, а не только текст ссылки, станет ссылкой*/

Теперь типовые ситуации, когда хочется выровнять, не пользуясь отсутствующими в стандарте HTML5 атрибутами align / valign .

1. Горизонтальное выравнивание по центру страницы, для блока задана ширина

Работает, если элемент блочный. Если он строчный — задать дополнительно в стиле display: block;

1

1

2. Горизонтальное выравнивание содержимого по центру страницы, для блока не задана ширина
 .box 
Content

2

2

3. Выравнивание по центру родительского блока, если для блока с контентом задана ширина
 .outbox < width: 80%; position: relative; background-color: darkgray; >.inbox 

Ширина внешнего блока outbox задана относительно ширины окна, и ширина внутреннего inbox — относительно родителя.

Затем мы устанавливаем смещение дочернего блока влево на половину его ширины.

Фоновые цвета заданы просто чтобы блоки были видны.

3

3

4. Горизонтальное выравнивание по центру родительского блока, если для блоков не задана ширина

.outbox < text-align: center; background-color: darkgray; >.inbox

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

4

4

5. Вертикальное выравнивание текста в строчном элементе

Если текст занимает одну строчку, например, это кнопка или пункт меню.

 .box  
5
6. Вертикальное выравнивание блока в родительском блоке
 .outbox < position: relative; background-color: darkgray; >.inbox 
Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

6

6

7. Горизонтальное и вертикальное выравнивание табличного типа с использованием вложения блоков
 .outbox < display: table; width: 100%; background-color: darkgray; >.inbox 

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

7

7

8. Выравнивание блока с заданными шириной и высотой по центру родительского блока
 .outbox < position: relative; background-color: darkgray; >.inbox 
Внешний блок

Внешний блок

Внешний блок

Внешний блок

Внешний блок

Внешний блок

8

8

9. Абсолютное позиционирование пустого элемента с заданными размерами по центру страницы или блока
   
9
10. Абсолютное позиционирование непустого элемента с заданными размерами по центру страницы или блока

Здесь и в п. 9 существенно используется такая возможность современных стилей как CSS3-трансформация.

10

10

11. Абсолютное позиционирование блока по центру страницы
   
11
12. Абсолютное позиционирование блока по центру родительского блока
  
Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

Внешний блок, его ширина явно не задана, он наполнен контентом

12

12

Для проверки кода везде использовался такой документ HTML5, кодировка Юникода UTF-8:

    Center  

24.05.2016, 12:06 [10011 просмотров]

Текст

Документация и примеры для обычных текстовых утилит для управления выравниванием, обертыванием, весом и тому подобное.

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

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

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

 class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum. 

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Выровненный слева текст для всех размеров видовых экранов.

Выровненный по центру текст для всех размеров видовых экранов.

Выровненный справа текст во всех размерах видового экрана.

Выровненный слева текст для экрана размера SM (small) или более широкого.

Выровненный слева текст для экрана размера MD (medium) или более широкого.

Выровненный слева текст для экрана размера LG (large) или более широкого.

Выровненный слева текст для экрана размера XL (extra-large) или более широкого.

 class="text-left">Выровненный слева текст для всех размеров видовых экранов.  class="text-center">Выровненный по центру текст для всех размеров видовых экранов.  class="text-right">Выровненный справа текст во всех размерах видового экрана.  class="text-sm-left">Выровненный слева текст для экрана размера SM (small) или более широкого.  class="text-md-left">Выровненный слева текст для экрана размера MD (medium) или более широкого.  class="text-lg-left">Выровненный слева текст для экрана размера LG (large) или более широкого.  class="text-xl-left">Выровненный слева текст для экрана размера XL (extra-large) или более широкого. 

Обертка текста и оверфлоу

Предотвращайте оборачивание текста с помощью класса .text-nowrap .

Этот текст должен выходить за текст родительского элемента.

 class="text-nowrap" style="width: 8rem;"> Этот текст должен выходить за текст родительского элемента. 

Для более длинного контента вы можете добавить класс .text-truncate для усечения текста эллипсом. Требует display: inline-block или display: block .

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

  class="row">  class="col-2 text-truncate"> Praeterea iter est quasdam res quas ex communi.   class="d-inline-block text-truncate" style="max-width: 150px;"> Praeterea iter est quasdam res quas ex communi. 

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Текст в нижнем регистре.

Текст в верхнем регистре.

 class="text-lowercase">Текст в нижнем регистре.  class="text-uppercase">Текст в верхнем регистре.  class="text-capitalize">разноРеГиСТровый текст. 

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

Жирность текста и курсив

Изменяйте толщину и курсивность текста.

 class="font-weight-bold">Жирный текст.  class="font-weight-normal">Нормальный текст.  class="font-weight-light">Легкий текст.  class="font-italic">Курсивный текст. 

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

margin: auto работает только тогда, когда задана ширина для элемента. В данном случаи ширина тега h4 равна 100% от ширины родителя и margin не может его отцентровать!

17 мар 2016 в 19:43
@IgorTkachuk спасибо!
17 мар 2016 в 19:59

4 ответа 4

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

margin: auto; — выравнивает блок за счёт добавление отступов по краям, но так-как ваш блок на всю ширину, то отступы не добавляются, им просто не где быть.
введите сюда описание изображения
Видно что блок во всю ширину и отступов нету.
Вариант 1
Всё таки выравнивать блок h1 , задать ему не полную ширину.
введите сюда описание изображения
Ширина 75px и видны отступы и блок по центру, но не текст.
Вариант 2
Выравнивать сам текст внутри h1 : text-align: center — выравнивает текст в блоке h1 , а не сам блок.
введите сюда описание изображения
Блок во всю ширину, но текст по центру.

Отслеживать
ответ дан 18 мар 2016 в 13:00
1,923 2 2 золотых знака 18 18 серебряных знаков 36 36 бронзовых знаков

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

Отслеживать
ответ дан 18 мар 2016 в 12:08
Shuhratjon Jumaev Shuhratjon Jumaev
702 1 1 золотой знак 6 6 серебряных знаков 23 23 бронзовых знака

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

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

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

Теория

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

Как оказалось, элементы уровня блок не могут, аналогично ячейкам таблицы, вертикально выравнивать. Но CSS позволяет изменять поведение элементов (свойство display), например, сделать блок, который будет себя вести как ячейка таблицы — display: table-cell. Казалось бы, вот оно решение, простое и понятное, осталось добавить vertical-align: middle и можно наслаждаться результатами своих трудов. Но есть горяче любимый всеми веб-разработчиками браузер, который не даст так быстро ликовать — Interner Explorer. IE6 и IE7 не поддерживает значение свойства display table-cell. Приходится прибегать к программному решению (expression) для этих браузеров.

Решение

  • блоку-родителю, внутри которого будет вертикальное выравнивание, задаем высоту (height), display: table-cell и vertical-aling: middle — этого для большинства браузеров будет достаточно
  • элементу, который будем выравнивать добавляем expression — скрипт, который при загрузке страницы, определит какой ему нужно сделать отступ сверху (в зависимости от высоты родителя и своей высоты), чтобы оказаться вертикально выровненным по центру (если нам нужно выровнять текст, его придется заключить в дополнительный контейнер). Этот трюк предназначен для IE6 и IE7

Для примера выровняем абзац текста:

абзац какого-то жутко интересного и полезного текста

.parent <
background: #3399FF;
display: table-cell;
height: 200px;
vertical-align: middle;
color: #fff;
width: 400px;
>
* html .parent span < /* хак для ие6 */
display: block;
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == ((200/2)-parseInt(offsetHeight)/2) >
*:first-child+html .parent span < /* хак для ие7 */
display: block;
z-index: expression(
runtimeStyle.zIndex = 1,
this == ((200/2)-parseInt(offsetHeight)/2) >

Заметки

  • родитель не должен быть плавающим (float: left/right), т.к. плавающие элементы автоматически становятся блочными
  • родитель не должен быть с абсолютным или фиксированным позиционированием (position: absolute/fixed)
  • элемент, который выравниваем по центру (дочерний, в примерах это span и img) должны быть блочными, нужно для IE6 и IE7, т.к. отступы сверху/снизу работают только для блочных элементов

Метод строчных блоков

Update by Александр Головко, Денис Шутько.

Этот вариант так же использует display: table-cell; и vertical-align: middle; для всех нормальных браузеров. Отличие в том, что для IE6-7 применяем другое лекарство — добавляем строчный блок, который и обеспечит выравнивание по центру. Чтоб не засорять код лишним блоком, добавим его с помощью эмуляции псевдоэлемента before.

 
абзац какого-то жутко интересного и полезного текста

.parent < display: table-cell; vertical-align: middle; height: 400px; width: 350px; border: 1px solid #539127; >/* Все стили ниже комментария нужны только для IE6-7. Если есть возможность — выносим их в отдельный CSS */ .parent ‘)); > .auxiliary < display: inline-block; vertical-align: middle; width: 0px; height: 100%; >.child < display: inline-block; >.child, .auxiliary

  • IE 6-8
  • Firefox 3.5
  • Opera 10
  • Chrome 7
  • Safari 3.1

Метод без expression

Update by Александр Головко, Надежда.

Если использовать дополнительный контейнер — можно обойтись без expression. Правда, при этом придется, опять таки, разделить стили для IE младших версий и нормальных браузеров.

 
абзац какого-то жутко интересного и полезного текста

.parent < position:relative; display:table; height: 400px; width: 350px; border: 1px solid #539127; vertical-align: middle; text-align: center; >.container < width:100%; display:table-cell; vertical-align:middle; position:relative; text-align:center; >.child
.parent < overflow:hidden >.parent, .container < display:block >.container < top:50%; left:0; >.child

  • IE 6-8
  • Firefox 3.5
  • Opera 10
  • Chrome 7
  • Safari 3.1

Плюсы:

  • нет expression;
  • нет ограничения на родителя, как в первом методе (т.е. может быть плаваюшим или с абсолютным/фиксированным позиционированием).

Минус

  • дополнительный контейнер в HTML.
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

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

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