Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
text-align

left, right, center и justify – первые два выравниваюn содержимое блока по левому и правому краям, третье по центру, а четвертое по ширине.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство text-align</TITLE>
  5.<STYLE type="text/css">
  6.body{
  7. text-align: center
  8.}
  9.</STYLE>
10.</HEAD>
11.<BODY>
12.<p class="first">
13.Умение легко перейти от шутки к серьезному и от
14.серьезного к шутке требует большего таланта,
15.чем обыкновенно думают. Нередко шутка служит
16.проводником такой истины, которая не достигла
17.бы цели без ее помощи. Фрэнсис Бэкон.
18.</p>
19.<HR>
20.<p>
21.Если вы направляете в чей-либо адрес остроту,
22.вы должны быть готовы принять ее и в свой адрес. Джонатан Свифт.
23.</p>
24.
25. </BODY>
26.</HTML>
27.
Свойство text-align
Свойство text-align
Значение string допускается применять только к ячейкам таблицы. Если в качестве значения свойства text-align уставлено содержимое находящееся боле чем в одной ячейки, то содержимое данных ячеек будет выровнено вдоль вертикальной оси. Следующий CSS
  1.TD { text-align: "." }
  2.TD:before { content: "$" }
будет причиной появления знака доллара перед содержимым каждой ячейки и выравнивания ячейки по вертикальной оси.
  1. <TABLE>
  2. <COL width="40">
  3. <TR> <TH>Long distance calls
  4. <TR> <TD> 1.30
  5. <TR> <TD> 2.50
  6. <TR> <TD> 10.80
  7. <TR> <TD> 111.01
  8. <TR> <TD> 85.
  9. <TR> <TD> 90
10. <TR> <TD> .05
11. <TR> <TD> .06
12. </TABLE>

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

Поскольку свойство text-align обладает способностью к наследованию, поэтому всё содержимое последующих блочных элементов, расположенных внутри элемента div с классом center так же будет выровнено по середине элемента.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство text-align</TITLE>
  5.<STYLE type="text/css">
  6.body{
  7. text-align: center
  8.}
  9..center {
10.border:2px dashed grey;
11.width:400px;
12.height:300px;
13.}
14..center div{
15.width:400px;
16.border:1px solid red;
17.}
18.
19..center div div{
20.width:100px;
21.border:1px solid blue;
22.}
23.</STYLE>
24.</HEAD>
25.<BODY>
26.
27.<div class="center">
28.Центральный блок
29.<div>
30.Блок внутри блока с классом center
31.<div>
32.Блок внутри блока, который располагается внутри блока с классом center
33.</div>
34.</div>
35.</div>
36.
37. </BODY>
38.</HTML>
39.
Пример свойства width
Пример свойства width

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

Следует помнить, что аналогом данному свойству является HTML атрибут align. В Internet Explorer 5 версии данное свойство реализован неверно, так как блок выравнивается по центру, а не его содержимое.

Атрибут align имеет меньший приоритет по сравнению с правилом CSS, поэтому в следующем примере текст будет выровнен по левому краю, а не по правому:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Пример элемента dfn</TITLE>
  5.<style type="text/css">
  6.DIV {
  7.text-indent:20pt;
  8.text-align:left;
  9.width:600px;
10.}
11.
12.</style>
13.</HEAD>
14.<BODY>
15.<div align="right" >
16.И сказал Господь Бог: не хорошо быть человеку одному. Бытие, II, 18.
17.</div>
18.
19.</BODY>
20.</HTML>

Познавательный пример, объясняющий свойство text-align:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство text-align</TITLE>
  5.<STYLE>
  6. P { text-align:center }
  7. .align1 { text-align:right }
  8. .align2 { text-align:justify }
  9.</STYLE>
10.</HEAD>
11.<BODY>
12.<P onclick="this.className='align1'"
13. ondblclick="this.className='align2'">
14.Нажим на меня!</P>
15.</BODY>
16.</HTML>


Доступ и установка с jQuery

  • Получить свойство textAlign: val = $("div").css("textAlign");
  • Установить свойство textAlign: $("div").css({"textAlign":"..."});
  • Установить свойство textAlign: $("div").css("textAlign","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org