Css текст выровнять – Свойство text-align, горизонтальное выравнивание текста — Оформление текста — HTML Academy

text-align: left, right, center, justify

Поддержка браузерами

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

Значение по умолчанию:
left если направление текста слева направо, и right если направление текста справа налево
Применяется: к блочным контейнерам (block, inline-block, table-cell, table-captions, list-item)
Анимируется: нет
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.textAlign=»right»

Синтаксис

text-align: left|right|center|justify|inherit;

Значения свойства

Значение Описание
left Выравнивает текст по левому краю.
right Выравнивает текст по правому краю.
center Выравнивает текст по центру.(Каждая срока текста выравнивается относительно центра элемента, имея одинаковые расстояния до краёв элемента с обеих сторон строки.)
justify Растягивание текста по ширине. Таким образом каждая строка текста имеет одинаковую ширину (как в газетах или журналах), растягиваясь от одного края элемента до другого.

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

inherit Указывает, что значение наследуется от родительского элемента.

Пример

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

div {
text-align: left;
}

Свойство text-align — выравнивание текста

Свойство text-align устанавливает выравнивание текста: по левому краю, по правому, по центру, по левому и правому краям одновременно.

Синтаксис

селектор { text-align: center | left | right | justify | auto | start | end; }

Значения

Значение Описание
center Текст будет выровнен по центру.
left Текст будет выровнен по левому краю.
right Текст будет выровнен по правому краю.
justify Текст будет выровнен одновременно и по правому краю, и по левому.
auto Не изменяет выравнивание элемента (значение по умолчанию).
start Равно left, если текст идет слева направо, и right, когда текст идет справа налево (арабский язык и т.п.).
end Равно right, если текст идет слева направо и left, когда текст идет справа налево.

Значение по умолчанию: auto. В большинстве случаев по умолчанию текст выровнен по левому краю (в арабском языке — по правому). Однако, есть исключения, например, текст в th будет выровнен по центру.

Пример . Значение left

<p> какой-то текст... </p> p { text-align: left; width: 400px; }

:

Пример . Значение right

<p> какой-то текст... </p> p { text-align: right; width: 400px; }

:

Пример . Значение center

<p> Lorem ipsum dolor sit amet. </p> p { text-align: center; }

:

Пример . Значение justify

<p> какой-то текст... </p> p { text-align: justify; width: 400px; }

:

выравнивание текста и других элементов

Скрытая сила text-align CSS

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

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

Flexbox

Отступ auto

Позиционирование

Скрытая сила text-align CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В следующих примерах я рассмотрю некоторые варианты использования text-align, которые просты и эффективны.

Список тегов

Скрытая сила text-align CSS

Этот мой любимый, и я им часто пользуюсь. Задав для каждого элемента тега inline-block, легко использовать для оболочки text-align: center.

.tags-wrapper { text-align: center; /* Text align for the win! */ } .tag { display: inline-block; }

.tags-wrapper {

  text-align: center; /* Text align for the win! */

}

 

.tag {

  display: inline-block;

}

Футер сайта

Скрытая сила text-align CSS

Предположим, что есть две блока, каждый из которых занимает 50% своего родителя. Внутри каждого у нас есть img. Один справа выровнен по правому краю, а другой — по левому краю. Как мы можем просто это сделать?

Скрытая сила text-align CSS

По умолчанию img — это встроенный элемент, на который может влиять свойство text-align. Если мне нужно выровнять логотип по правому краю, я могу сделать следующее:

Скрытая сила text-align CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<div> <div> <img src=»logo.png» alt=»»> </div> <divlogo.png» alt=»»> </div> </div>

<div>

   <div>

      <img src=»logo.png» alt=»»>

   </div>

   <divlogo.png» alt=»»>

   </div>

</div>

.item.start { text-align: right; } .item.end { text-align: left; }

.item.start {

    text-align: right;

}

 

.item.end {

    text-align: left;

}

Компонент карточки

Скрытая сила text-align CSS

Аватар пользователя может быть иконкой или чем-то еще, за которым следует элемент с display: block. В данном случае — это заголовок карточки.

.card { /* Other styles */ text-align: center; } .card-avatar { display: inline-block; width: 50px; height: 50px; /* Other styles */ }

.card {

  /* Other styles */

  text-align: center;

}

.card-avatar {

  display: inline-block;

  width: 50px;

  height: 50px;

  /* Other styles */

}

Сочетание text-align с writing-mode

Скрытая сила text-align CSS

В случае использования writing-mode можно расположить заголовок по центру по вертикали.

h3 { writing-mode: vertical-lr; height: 100%; text-align: center; }

h3 {

  writing-mode: vertical-lr;

  height: 100%;

  text-align: center;

}

Демо

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.

Скрытая сила text-align CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Скрытая сила text-align CSS

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как в css выровнять текст по центру: множество простых способов

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

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

Html и его детища <center> и align

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

Что касается валидации (данный термин подробно описан в статье «Как проверить html код на ошибки»), то в самой спецификации html осуждается использование <center>, так как для валидности необходимо использовать переходной <!DOCTYPE>.

Такой тип <!DOCTYPE> пропускает запрещенные элементы.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>CENTER</title>
  <meta charset=utf-8">
 </head>
 <body> 
 <center>
  <p>Этот контент будет расположен по центру.</p>
  </center>  
 </body> 
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <title>CENTER</title> <meta charset=utf-8″> </head> <body> <center> <p>Этот контент будет расположен по центру.</p> </center> </body> </html>

Теперь перейдем к атрибуту align. Он задает горизонтальное выравнивание объектов на страницах сайтов и вписывается после объявления тега. Обычно с его помощью контент можно выровнять по левому краю (left), по правому краю (right), по центру (center) и по ширине текста (justify).

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
 <head>
  <title>align</title>
  <meta charset=utf-8">
 </head>
 <body> 
  <p align ="center"><img src="http://zverivdom.com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski--speshite-ostalosy-dva-shhenka.jpg" alt="Щенок" align="middle"> Этот контент будет расположен по центру.</p>
 </body> 
</html>

<!DOCTYPE HTML> <html> <head> <title>align</title> <meta charset=utf-8″> </head> <body> <p align =»center»><img src=»http://zverivdom.com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski—speshite-ostalosy-dva-shhenka.jpg» alt=»Щенок» align=»middle»> Этот контент будет расположен по центру.</p> </body> </html>

Заметьте, что для картинки разбираемый нами атрибут имеет несколько другие значения.

В примере я использовал align=»middle». Благодаря этому изображение выровнялось так, что предложение расположилось четко посредине картинки.

Инструменты центрирования в css

Css-свойствами, предназначенными для выравнивания блоков, текстового и графического контента, пользуются намного чаще. Это связанно в первую очередь с удобством и гибкостью реализации стилей.

 

Итак, начнем с первого свойства центрирования текста — это text- align.

Оно функционирует так же, как и align в html разметке. Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit).

Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 5px double red;
    padding: 0 22px 0 22px;
   }
#l {
   text-align: right; }
#s {
   text-align: end; }
  </style>
 </head>
 <body>
  <div><p>Предложение справа</p>
      <p>Предложение c использованием end</p>
</div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-align</title> <style> div { border: 5px double red; padding: 0 22px 0 22px; } #l { text-align: right; } #s { text-align: end; } </style> </head> <body> <div><p>Предложение справа</p> <p>Предложение c использованием end</p> </div> </body> </html>

Расскажу о небольшой фишке. При выборе значения justify последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last.

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

Ключевое слово Предназначение
baseline Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у.
middle Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя.
bottom Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех.
top Аналогично bottom, только с верхней частью объекта.
super Делает символ надстрочным.
sub Делает элемент подстрочным.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
<style>
div{
  font-size: 4em;
  text-align:center;
  text-decoration: underline;
}
#A{vertical-align: top;}
#B{vertical-align: middle;}
#C{vertical-align: super;}
#D{vertical-align: sub;}
</style>
 </head>
 <body>  
  <div>
Ц<span>В</span>Е<span>Т</span><span>О</span><span>К</span>
  </div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>vertical-align</title> <style> div{ font-size: 4em; text-align:center; text-decoration: underline; } #A{vertical-align: top;} #B{vertical-align: middle;} #C{vertical-align: super;} #D{vertical-align: sub;} </style> </head> <body> <div> Ц<span>В</span>Е<span>Т</span><span>О</span><span>К</span> </div> </body> </html>

Отступы

И наконец мы дошли с вами до отступов в абзаце. В языке css используется специальное свойство под названием text-indent.

С его помощью можно сделать как красную строку, так и выступ (нужно указать отрицательное значение).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-indent</title>
  <style>
   #a { text-indent: 53px;    }
#b { text-indent: -43px;    }
div {
background: #FFDAB9;
width:35%;
font-size:29px;
margin-left: 30%;
padding-left:50px;
}
  </style> 
 </head> 
 <body>
<div>
   <p>Для создания красной строки нужно знать всего лишь один параметр.</p>
   <p>Им является простое свойство text-indent.</p>
</div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-indent</title> <style> #a { text-indent: 53px; } #b { text-indent: -43px; } div { background: #FFDAB9; width:35%; font-size:29px; margin-left: 30%; padding-left:50px; } </style> </head> <body> <div> <p>Для создания красной строки нужно знать всего лишь один параметр.</p> <p>Им является простое свойство text-indent.</p> </div> </body> </html>

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

С уважением, Роман Чуешов

Загрузка…

Прочитано: 855 раз

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

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