Arkusze CSS - rady i pomoc

Środkowanie

Powrzechnym zadaniem CSS jest środkowanie tekstu lub obrazów. W praktyce istnieje trzy rodzaje wyśrodkowań:

• Środkowanie lini tekstu
• Środkowanie bloku tekstu lub obrazu
• Środkowanie bloku lub obrazu pionowo

Środkowanie lini tekstu

Najpopularniejszy z typów i najłatwiejszy w realizacji. Css posiada własność nazwaną 'text-align', która służy do środkowania tekstu w paragrafie lub nagłówku:

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

Kod ten sprawia, że linie w paragrafie i nagłówku są wypośrodkowane pomiędzy marginesami, np:

Środkowanie bloku lub obrazu

Czasami chcemy wyśrodkować cały blok a nie tylko tekst. Innymi słowy chcemy aby lewe i prawe marginesy były równe. Sposobem na to jest ustawienie marginesów na 'auto'. Używa się tego zazwyczaj z blokiem o określonej szerokości, ponieważ jeśli blok ma niestałą szerokości, zajmie to cały dostępny obszar. Na przykład:

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

Jest to także dobrym sposobem na wyśrodkowanie obrazów: zrób z niego niezależny blok i określ właściwości marginesów. Np:

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

Środkowanie pionowe

CSS poziom  2 nie posiada właściwości do środkowania pionowego. Takowa pojawi się w CSS poziom  3. Ale nawet w CSS2 można środkować bloki pionowo poprzez łączenie pewnych własności. Trick ten polega na tym, że określa się zewnętrzny blok w formacie komórki tabeli, ponieważ zawartości komórki tabeli można środkować pionowo.

The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Ten mały paragraf...
</DIV>