www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Свойства CSS (ЦСС) > text-align
Свойства CSS (ЦСС)
Все свойства
!important
@import
@media
active
after
background
background-attachment
background-color
background-image
background-position
background-repeat
before
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
first-child
float
focus
font
font-family
font-size
font-style
font-variant
font-weight
height
hover
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
unicode-bidi
vertical-align
visibility
visited
white-space
width
word-spacing
z-index
CSS (ЦСС) по категориям
Цвет и фон
Границы
Шрифт
контент
Списки
Форматирование
Позиционирование
Отступы
Поля
Таблицы
Интерфейс
Важность
Псевдоэлементы
Псевдоклассы
Контент

text-align

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фохMozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию left
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ <center>
<p | h1 | div | table | thead | tbody | tfoot | tr | th | td align>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.ШТМЛ#propdef-text-align

Описание

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

Синтаксис

text-align: center | justify | left | right

Аргументы

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

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>text-align</title>
  <style type="text/CSS (ЦСС)">
   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 id="left"><div class="content">Выравнивание по левоой стороне</div></div>
  <div id="center"><div class="content">Выравнивание по центру</div></div>
  <div id="right"><div class="content">Выравнивание по правой стороне</div></div>

 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Выравнивание контента в браузере Опера

Браузер Internet Эксплорер несколько иначе трактует данный пример, чем Опера и Файер фох, выравнивая не только контент, но и блоки (рис. 2).

Рис. 2

Рис. 2. Выравнивание контента в браузере Internet Эксплорер

Объектная модель

[window.]document.getElementById("elementID").style.textAlign

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект