Каскадныя табліцы стыляў
CSS рады & прыёмы

Цэнтраванне

Агульная функцыя CSS - цэнтраванне тэксту або малюнкаў. Фактычна, існуе тры выгляду цэнтравання:

• Цэнтраванне ліній тэксту
• Цэнтраванне блокаў тэксту або малюнкаў
• Цэнтраванне блокаў або малюнкаў вертыкальна

Цэнтраванне ліній тэксту

Найбольш агульны і (таму) найлягчэйшы тып цэнтравання - тып цэнтравання ліній тэксту ў параграфе або змесце. Для гэтага CSS валодае ўласцівасцю 'text-align':

P { text-align: center }
H2 { text-align: center }

перакладае кожную лінію ў P або H2, цэнтраваных паміж яго палямі, вось так:

Цэнтраванне блокаў або малюнкаў

Часам цэнтраваць трэба не тэкст, а блокі ў цэлым. Або, па-іншаму гаворачы: мы жадаем, каб правае і левае полі былі аднолькавымі. Для гэтага трэба ўсталяваць палі на 'auto'. Гэта звычайна выкарыстоўваецца для блокаў з фіксаванай шырынёй, таму што калі блок сам па сабе гнуткі, ён проста прыме ўсю даступную шырыню. Вось прыклад:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">This rather...

Гэта таксама метад цэнтравання малюнка: змесціце яго ва ўласны блок і ўжывіце ўласцівасці палёў. Напрыклад:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Вертыкальнае цэнтраванне

CSS узроўня 2 не валодае ўласцівасцю вертыкальнага цэнтравання. Магчыма, яно з'явіцца ў версіі CSS узроўня 3. Але нават у CSS2 вы можаце цэнтраваць блокі вертыкальна пры дапамозе камбінавання некалькіх уласцівасцяў. Трук складаецца ў тым, каб вызначыць, што наружны блок павінен фарматавацца, як вочка табліцы, таму як змесціва вочкі can павінна цэнтравацца вертыкальна.

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>