Содержание

text-align | CSS (Примеры)

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

Текст

Синтаксис

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю.
Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
start
Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end
Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Значение по-умолчанию: left

Применяется к блочным контейнерам

Спецификации

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

text-align: justify:

Can I Use css-text-justify? Data on support for the css-text-justify feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>text-align</title>
    <style>
      div {
        border: 1px solid black; /* Параметры рамки */
        padding: 5px; /* Поля вокруг текста */
        margin-bottom: 5px; /* Отступ снизу */
      }
      #left {
        text-align: left;
      }
      #right {
        text-align: right;
      }
      #center {
        text-align: center;
      }
      . content {
        width: 75%; /* Ширина слоя */
        background: #fc0; /* Цвет фона */
      }
    </style>
  </head>
  <body>
    <div>
      <div>Выравнивание по левому краю</div>
    </div>
    <div>
      <div>Выравнивание по центру</div>
    </div>
    <div>
      <div>
        Выравнивание по правому краю
      </div>
    </div>
  </body>
</html>

CSS text-align



Пример

Задайте выравнивание текста для различных элементов <div>:

div.a {
    text-align: center;
}

div.b {
    text-align: left;
}

div.c {
    text-align: right;
}

div.c {
    text-align: justify;
}

Подробнее примеры ниже.


Определение и использование

Свойство text-align

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

Значение по умолчанию: влево, если направление является ltr, и вправо, если направление RTL
Inherited: yes
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.textAlign=»right»

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

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

Свойство
text-align 1.0 3.0 1.0
1.0
3.5


Синтаксис CSS

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

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

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

Другие примеры

Пример

Другой пример выравнивания текста:

h2 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}


Похожие страницы

CSS Справочник: CSS Text

HTML DOM Справочник: textAlign Свойство


CSS/Свойство text-align

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Свойство text-align</title> <style type=»text/css»> blockquote { text-align: justify; } address { text-align: right; } </style> </head> <body> <h2>Пример горизонтального выравнивания</h2> <blockquote> «Способность быть в Одиночестве – это способность Любить. Это правда Бытия. Только те люди, которые способны быть наедине с «<i>собой</i>», могут любить, делиться, проникать в самую глубинную сущность «другого», не присваивая «другого», не становясь зависимым от «другого», не превращая «другого» в вещь, не попадая в зависимость от «другого».
Они представляют друг другу <b>абсолютную свободу</b>, потому что знают, что если «другой» покинет их, они будут <em>также счастливы, как и сейчас</em>. <strong>Другой человек не может отнять их счастье, потому что оно не даётся другим человеком</strong>…» </blockquote> <address><b>ОШО</b></address> </body> </html>

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство text-align</title>
<style type=»text/css»>
blockquote { text-align: justify; }

address { text-align: right; }
</style>
</head>
<body>
<h2>Пример горизонтального выравнивания</h2>
<blockquote>
«Способность быть в Одиночестве – это способность Любить. Это правда Бытия. Только те люди, которые способны быть наедине с «<i>собой</i>», могут любить, делиться, проникать в самую глубинную сущность «другого», не присваивая «другого», не становясь зависимым от «другого», не превращая «другого» в вещь, не попадая в зависимость от «другого». Они представляют друг другу <b>абсолютную свободу</b>, потому что знают, что если «другой» покинет их, они будут <em>также счастливы, как и сейчас</em>. <strong>Другой человек не может отнять их счастье, потому что оно не даётся другим человеком</strong>…»
</blockquote>
<address><b>ОШО</b></address>
</body>
</html>

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

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

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

Flexbox

Отступ auto

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

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

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

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

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

Список тегов

Этот мой любимый, и я им часто пользуюсь. Задав для каждого элемента тега 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;

}

Футер сайта

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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;

}

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

Аватар пользователя может быть иконкой или чем-то еще, за которым следует элемент с 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

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

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

h3 {

  writing-mode: vertical-lr;

  height: 100%;

  text-align: center;

}

Демо

Автор: Ahmad Shadeed

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

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

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

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

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

PSD to HTML

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

Смотреть

Разбираемся с vertical-align — Веб-стандарты

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

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

В этой статье я постараюсь в понятной форме рассказать про это свойство.

Чего оно не делаетСкопировать ссылку

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

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

<td valign="top">
    Что-нибудь…
</td>

В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align, они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.

Но vertical-align работает не так.

Чем оно является на самом делеСкопировать ссылку

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

  1. Оно применяется только к строчным элементам inline или строчным блокам inline-block.
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
  3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

div {
    vertical-align: middle; /* эта строка бесполезна */
}

Почему? Потому что <div> — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.

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

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

Несколько картинокСкопировать ссылку

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

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

Ключевые словаСкопировать ссылку

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align:

  • baseline, значение по умолчанию или «изначальное»
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для <input> установлено как top, он выровнен по самому высокому элементу в строке (большой картинке).

Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom, тогда элементы будут выравниваться относительно текста в строке.

О ключевом слове

middleСкопировать ссылку

К сожалению, правило vertical-align: middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height). Потому, мне кажется, что это значение на самом деле должно называться text-middle, чтобы стало понятно, какой будет результат.

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значенияСкопировать ссылку

Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:

input {
    vertical-align: 100px;
}

span {
    vertical-align: 50%;
}

img {
    vertical-align: -300px;
}

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

ЗаключениеСкопировать ссылку

Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:

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

CSS свойство text-align-last


Пример

Выровнять последнюю строку текста в трех элементах

:

дива {
выравнивание текста: выравнивание; / * Для Edge * /
выравнивание текста последний: право;
}

div.b {
выравнивание текста: выравнивание; / * Для Edge * /
выравнивание текста последний: центр;
}

div.c {
выравнивание текста: выравнивание; / * Для Edge * /
text-align-last: justify;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Свойство text-align-last указывает, как выровнять последнюю строку текста.

Обратите внимание, что свойство text-align-last устанавливает выравнивание для всех последних строк в выбранном элементе. Итак, если вы иметь

с тремя абзацами в нем, text-align-last будет применяться к последней строке КАЖДОГО параграфа. Чтобы использовать text-align-last только для последнего абзаца в контейнере вы можете использовать: last child, см. пример ниже.

Примечание: В Edge до 79 свойство text-align-last работает только с текстом, который имеет «выравнивание текста: выравнивание».

Значение по умолчанию: авто
Унаследовано: да
Анимация: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.textAlignLast = «право» Попытайся

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

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

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Имущество
выравнивание текста последний 47. 0 5,5 * 49,0
12,0 -моз-
Не поддерживается 34,0

* В Internet Explorer 11 (и более ранних версиях) значения «начало» и «конец» не поддерживаются.



Синтаксис CSS

выравнивание текста последний: авто | слева | справа | по центру | выравнивание | начало | конец | начальный | наследование;

Стоимость недвижимости

Значение Описание Играй
авто Значение по умолчанию.Последняя строка выравнивается по ширине и выравнивается по левому краю Играй »
слева Последняя строка выровнена по левому краю Играй »
правый Последняя строка выровнена по правому краю Играй »
центр Последняя строка выровнена по центру Играй »
оправдать Последняя строка выравнивается как остальные строки Играй »
начало Последняя строка выравнивается по началу строки (слева, если направление текста слева направо, и справа, если направление текста справа налево) Играй »
конец Последняя строка выравнивается по концу строки (справа, если направление текста слева направо, и слева, если направление текста справа налево) Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать примерно начальная Играй »
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Используйте text-align-last только в самой последней строке в контейнере:

div.b p: последний ребенок {
выравнивание текста последний: центр;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HTML DOM: свойство textAlignLast



Комбинаторы CSS


Комбинаторы CSS

Комбинатор — это то, что объясняет взаимосвязь между селекторами.

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

В CSS есть четыре разных комбинатора:

  • селектор потомков (пробел)
  • дочерний селектор (>)
  • Селектор соседних братьев (+)
  • общий родственный селектор (~)

Селектор потомков

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемент.

В следующем примере выбираются все элементы

внутри элементов

:


Селектор детей (>)

Дочерний селектор выбирает все элементы, которые являются дочерними элементами указанный элемент.

В следующем примере выбираются все элементы

, которые дочерние элементы

элемент:



Селектор соседних братьев и сестер (+)

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

Родственные элементы должны иметь один и тот же родительский элемент, и «смежный» означает «сразу после».

В следующем примере выбирается первый элемент

, который помещается сразу после элементов

:


Общий селектор братьев и сестер (~)

Общий селектор одноуровневого элемента выбирает все элементы, которые являются одноуровневыми элементами указанного элемента.

В следующем примере выбираются все элементы

, которые являются братьями и сестрами элементов

:


Проверьте себя упражнениями!


Все селекторы комбинаторов CSS

Селектор Пример Описание примера
элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

.
элемент + элемент div + p Выбирает первый элемент

, который помещается сразу после элементов

element1 ~ element2 полоса Выбирает каждый элемент
    , которому предшествует элемент

    .



text-align — CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

 
выравнивание текста: слева;
выравнивание текста: вправо;
выравнивание текста: центр;
выравнивание текста: выравнивание;
выравнивание текста: выравнивание-все;
выравнивание текста: начало;
выравнивание текста: конец;
выравнивание текста: соответствие родительского;


выравнивание текста: ". ";
выравнивание текста: "." центр;


выравнивание текста: -moz-center;
выравнивание текста: -webkit-center;


выравнивание текста: наследование;
выравнивание текста: начальное;
выравнивание текста: отключено;
  

Свойство text-align задается одним из следующих способов:

Значения

start Это экспериментальный API, который не следует использовать в производственном коде.
То же, что и слева, , если направление слева направо, и справа, , если направление справа налево.
конец Это экспериментальный API, который не следует использовать в производственном коде.
То же, что и справа, , если направление слева направо, и слева, , если направление справа налево.
слева
Встроенное содержимое выравнивается по левому краю строчного поля.
правый
Встроенное содержимое выравнивается по правому краю строчного поля.
центр
Встроенное содержимое центрируется в рамке строки.
по ширине
Встроенное содержимое оправдано. Текст должен располагаться таким образом, чтобы его левый и правый края совпадали с левым и правым краями линейного поля, за исключением последней строки.
justify-all Это экспериментальный API, который не следует использовать в производственном коде.
То же, что и , выравнивание , но также принудительное выравнивание последней строки.
match-parent Это экспериментальный API, который не следует использовать в производственном коде.
Аналогично наследовать , но значения start и end вычисляются в соответствии с направлением родительского объекта и заменяются соответствующим значением left или right .
Это экспериментальный API, который не следует использовать в производственном коде.
При применении к ячейке таблицы указывает символ выравнивания, по которому будет выровнено содержимое ячейки.

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

Начальное значение start , или безымянное значение, которое действует как left , если направление равно ltr , right если направление равно rtl , если start не поддерживается браузер.
Применимо к блок-контейнерам
Унаследовано да
Вычисленное значение , как указано, за исключением родительского значения , которое рассчитывается относительно значения направления его родительского объекта и результатов в вычисленном значении слева или справа
Тип анимации дискретный
  начало | конец | слева | право | центр | оправдать | match-parent  

Выравнивание по левому краю

HTML
  

Целочисленный элемент массы в пустом месте varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS
  .example {
  выравнивание текста: слева;
  граница: сплошная;
}  
Результат

Текст по центру

HTML
  

Целочисленный элемент массы в пустом месте varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS
  .example {
  выравнивание текста: центр;
  граница: сплошная;
}  
Результат

Выровнять

HTML
  

Целочисленный элемент массы в пустом месте varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

CSS
  .example {
  выравнивание текста: выравнивание;
  граница: сплошная;
}  
Результат

Примечания

Стандартный способ центрирования самого блока без центрирования его встроенного содержимого — установка левого и правого поля с до авто , например:

  .something {
  маржа: авто;
}
  
  .something {
  маржа: 0 авто;
}
  
  .something {
  маржа слева: авто;
  маржа-право: авто;
}
  

Таблицы BCD загружаются только в браузере

выравнивание текста · Документы WebPlatform

Сводка

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

Обзорная таблица

Начальное значение
start, или безымянное значение, которое действует как left, если direction - ltr, right, если direction - rtl, если start не поддерживается браузером.
Относится к
блок-контейнеров
Унаследовано
Да
СМИ
визуал
Расчетное значение
, как указано, за исключением родительского значения соответствия, которое вычисляется относительно значения направления его родительского элемента и приводит к вычисленному значению влево или вправо
Анимационный
Нет
Свойство объектной модели CSS
textAlign

Синтаксис

  • text-align:
  • выравнивание текста: по центру
  • выравнивание текста: конец
  • выравнивание текста: выравнивание
  • text-align: left
  • выравнивание текста: соответствие-родитель
  • выравнивание текста: вправо
  • выравнивание текста: начало
  • выравнивание текста: начало конец

Значения

начало
То же, что слева, , если направление слева направо, и справа, , если направление справа налево.
конец
То же, что справа , если направление слева направо, и слева , если направление справа налево.
осталось
Встроенное содержимое выравнивается по левому краю строчного поля.
правый
Встроенное содержимое выравнивается по правому краю строчного поля.
центр
Встроенное содержимое центрируется в рамке строки.
<строка>
Первое появление строки из одного символа — это элемент, используемый для выравнивания.ключевое слово, следующее за ним или предшествующее ему, указывает, как оно выровнено. Это позволяет, например, выровнять числовые значения по десятичной запятой.
оправдать
Текст выровнен. Текст должен выровняться своими левыми и правыми краями по отношению к левому и правому краям абзаца.
совпадающий родитель
Аналогично наследованию с той разницей, что значение , , начало, , и , , конец, , вычисляются в соответствии с указанием родителя и заменяются соответствующим значением слева, или справа, .
начало конец
Задает начало выравнивание первой строки и любой строки сразу после принудительного разрыва строки; и end выравнивание любых оставшихся строк, на которые не влияет text-align-last .

Примеры

Здесь показаны четыре возможных типа выравнивания текста.

  

Этот абзац выровнен по левому краю.

Этот абзац центрирован.

Этот абзац выровнен по правому краю.

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

Посмотреть живой пример

  .left {text-align: left;}
.cenetered {выравнивание текста: центр;}
.right {выравнивание текста: право;}
.justified {ширина: 200 пикселей; выравнивание текста: justify;}
  

Банкноты

Стандартный способ центрирования самого блока без центрирования его встроенного содержимого — это установка левого и правого поля на авто, т. е.г .: наценка: авто; Маржа или : 0 авто; или левое поле: авто; маржа-право: авто;

Связанные спецификации

Уровень текста CSS 3
Осадка рабочий

См. Также

Другие статьи

Атрибуции

  • Сеть разработчиков Mozilla: статья

  • Сеть разработчиков Microsoft: статья

Как выровнять текст с помощью CSS

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

  1. Свойство text-align используется для указания того, как встроенный контент должен быть выровнен внутри блока. Например:
      
    Значения:
    • слева
    • правый
    • центр
    • по ширине

  2. Свойство vertical-align используется, чтобы указать, как встроенный контент должен быть выровнен по вертикали относительно одноуровневого встроенного содержимого. Например:
      style = "vertical-align: text-bottom;  
    Значения:
    • нижний
    • средний
    • верх
    • текст внизу
    • базовый
    • текст вверху
    • переходник
    • супер
  3. В следующем примере кода показаны эти свойства в использовании:

      
    
    
    
     Выровнять текст 
    
    
    

    Выровнять текст

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

    выравнивание текста: слева
    выравнивание текста: центр
    выравнивание текста: вправо
    text-align: justify - чтобы увидеть эффект выравнивания, текстовый блок должен быть обернут text-align: justify - чтобы увидеть эффект выравнивания, текстовый блок должен быть обернут text-align: justify - чтобы увидеть эффект выравнивания, текстовый блок должен быть обернут

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

    блок вертикальное выравнивание: снизу
    блок вертикальное выравнивание: средний
    блок вертикальное выравнивание: сверху
    блок вертикальное выравнивание: нижний текст
    блок вертикальное выравнивание: базовая линия
    блок вертикальное выравнивание: текст сверху
    вертикальное выравнивание: sub
    вертикальное выравнивание: супер

Приведенный выше код отобразит следующее:

Автор: Крис Минник

Крис Минник, соучредитель WatzThis ?, курировал разработку сотен веб- и мобильных проектов для клиентов, от малых предприятий до некоторых крупнейших компаний мира. Активный писатель, Крис является автором и соавтором книг и статей по широкому кругу тем, связанных с Интернетом, включая HTML, CSS, мобильные приложения, электронную коммерцию, электронный бизнес, веб-дизайн, XML и серверы приложений. Его опубликованные книги включают «Приключения в программировании», «JavaScript для детей для чайников», «Написание компьютерного кода», «Кодирование с помощью JavaScript для чайников», «Начало HTML5 и CSS3 для чайников», «Webkit для чайников», «Библия для сертификации дизайнеров электронной коммерции CIW» и XHTML.

О Webucator

Webucator проводит обучение под руководством инструктора для студентов из США и Канады.Мы обучили более 90 000 студентов из более чем 16 000 организаций таким технологиям, как Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular и многим другим. Ознакомьтесь с нашим полным каталогом курсов.

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

Старый способ центрировать стол был простым:

  
    ...
  

Однако атрибут «align» устарел в пользу CSS (каскадных таблиц стилей), и это хорошо.Однако не так очевидно, как центрировать таблицу с помощью CSS.

Может показаться очевидным способ использования CSS «text-align: center;» где-то, может быть, как одно из этих:

  <таблица>
 

ИЛИ ЖЕ

  
<таблица> ...

ИЛИ, если ты действительно отчаялся,

  
    <таблица>
      ...
    
  
 

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

Почему? Поскольку «выравнивание текста» применяется к встроенному содержимому, а не к элементу уровня блока, например, «таблица».

Способ 1

Чтобы центрировать таблицу, вам нужно установить поля, например:

  table.center {
    маржа слева: авто;
    маржа-право: авто;
  }
 

А потом сделайте так:

  <таблица>
    ...
  
 

На этом этапе Mozilla и Opera займут ваше место на столе. Однако Internet Explorer 5.5 и выше требует, чтобы вы также добавили это в свой CSS:

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

Способ 2

Если вы хотите, чтобы ваша таблица имела определенную процентную ширину, вы можете сделать это:

  table # table1 {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

А затем в своем HTML / XHTML вы должны сделать это:

  <таблица>
    ...
  
 

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

  table.center {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

И это в вашем HTML:

  <таблица>
    ...
  
 
  <таблица>
    ...
  
 

Способ 3

Если вы хотите, чтобы ваша таблица имела фиксированную ширину, определите свой CSS следующим образом:

  div.container {
    ширина: 98%;
    маржа: 1%;
  }
  table # table1 {
    выравнивание текста: центр;
    маржа слева: авто;
    маржа-право: авто;
    ширина: 100 пикселей;
  }
  tr, td {выравнивание текста: слева;}
 

Установите ширину: 100 пикселей на любую ширину, которая вам нужна.

«text-align: center» предназначен для Internet Explorer, без него он не будет работать.К сожалению, «text-align: center» центрирует весь текст внутри ячеек таблицы, но мы противодействуем этому, устанавливая «tr» и «td» для выравнивания по левому краю.

Затем в своем HTML вы должны сделать это:

  
<таблица> ...

Еще раз, я использую идентификатор. Если вам нужно одинаково центрировать несколько таблиц, используйте класс вместо идентификатора.

Различия между тегами HTML и CSS «text-align: center;» Недвижимость

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

HTML-тег

: Тег
в HTML используется для установки выравнивания текста по центру. Этот тег не поддерживается в HTML 5. Свойство CSS используется для установки выравнивания элемента вместо центрального тега в HTML 5. Это элемент уровня блока, который используется для отображения текста, заключенного в тег в центре. по горизонтали. Этот тег поддерживают самые распространенные браузеры, такие как Google Chrome, Mozilla Firefox, Internet Explorer.

  • Пример: Приведенный ниже код ранее использовался в HTML 4 и более ранних версиях для выравнивания текста по центру.

    < html >

    < Головка >

    < title > HTML-тег центра title >

    < стиль >

    h2 {

    цвет: зеленый;

    }

    стиль >

    головка >

    < корпус >

    < центр >

    < h2 > GeeksforGeeks h2 >

    < h3 > HTML < центр > Тег h3 >

    < p >

    GeeksforGeeks:

    Портал компьютерных наук для компьютерных фанатов.

    p >

    центр >

    корпус >

    html >

  • Выход:

CSS «выравнивание текста: центр;» Свойство: Это свойство CSS, используемое для выравнивания текста по центру, которое может использоваться во многих компонентах, включая таблицы, кнопки и т. Д.

  • Пример: Реализация свойства text-align: center приведена ниже:

    < html >

    < Головка >

    < титул >

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

    название >

    < стиль >

    h2 {

    цвет: зеленый;

    }

    стиль >

    головка >

    < корпус >

    < h2 style = "выравнивание текста: по центру;" >

    GeeksforGeeks

    h2 >

    < h3 style = "выравнивание текста: по центру;" >

    CSS "выравнивание текста: центр;" Недвижимость

    h3 >

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

    GeeksforGeeks:

    Портал компьютерных наук для компьютерных фанатов.

    p >

    корпус >

    html >

  • Выход:

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

.

Различия между тегом HTML

и CSS «text-align: center;» недвижимость:

HTML тег
CSS «выравнивание текста: центр;» Свойство
HTML-тег
является элементом блочного уровня.
CSS «выравнивание текста: центр;» property - это встроенный элемент.
Лучше всего прикрепить его к разделу веб-страницы. Лучше всего прикрепить его к небольшому участку строки на веб-странице.

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

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