Уеб Стыле Схеетс
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 Level 2 нема имовине за центрирање ствари вертикално. Тамо ће вероватно бити једна у CSS Level 3. Али чак и у CSS2 можете центар блокова вертикално, комбиновањем неколико својстава. Смицалица је навести да је спољни блок је бити форматирана у ћелију табеле, јер се садржај ћелију табеле могу бити усмерен вертикално.

У примеру у наставку центри одломак унутар блока који је дао одређене висине. А одвојена пример показује да је тачка вертикално центриран у прозору прегледача, јер је унутар блока који је апсолутно позиционирани и као висок као прозор.

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

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices