TłUMACZENIA ANGIELSKI METODYKA JĘZYKOZNAWSTWO KONTAKT

>

 

Dokument ten jest tłumaczeniem, które może zawierać błędy. Zostało ono wykonane przez Angielski z ELTT. Oryginalna wersja dokumentu en

Zobacz inne strony

Arkusze CSS - rady i pomoc

(This page uses CSS style sheets)

Linie

Bloki

Pionowo

Demo

Środkowanie

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

Ś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:

Linie w tym paragrafie są wypośrodkowane dzięki wartości 'center' we właściwości CSS 'text-align'.

Ś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...

This rather narrow block of text is centered. Note that the lines inside the block are not centered (they are left-aligned), unlike in the earlier example.

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="...">

The following image is centered: some random image

Ś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>

Ten mały paragraf

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2004/01/06 21:54:41 $ GMT

Mapa