[HTML] Jak wycentrować stronę?

Wbrew pozorom, wycentrowanie strony HTML jest bardzo proste i sprowadza się do zastosowania dodatkowego elementu blokowego, tzw. kontenera wraz z odpowiednią regułą CSS. Kontener jest głównym elementem, w którym umieszczamy całą zawartość strony.

W kontenerze umieszczamy właściwą strukturę i treść strony (to co ma zostać wycentrowane musi znajdować się w głównym elemencie div - kontenerze). Następnie musimy dodać reguły CSS dla kontenera, a mianowicie ustawić margines margin:0 auto; oraz stałą szerokość np. width:900px;

Przykład:

<html>
<head>
</head>
<body>
<div class="container">
<!-- tu właściwa treść/szablon -->
</div>
</body>
</html>
Reguła CSS kontenera:
.container {margin:0 auto;width:900px;}

To wszystko, od teraz strona będzie wyświetlała się dokładnie po środku okna przeglądarki. Oczywiście szerokość (width) strony ustawiamy wedle własnych potrzeb.

Komentarze

  1. czy ktoś wie jak OSTYLOWAĆ kontenra? ? ?

    OdpowiedzUsuń
  2. <@html>
    <@head>
    <@style>
    #container {margin:0 auto;width:1000px;}
    <@/style>
    <@/head>
    <@body>
    <@div id="container">

    <@/div>
    <@/body>
    <@/html>

    Możesz tak, lub w CSS. Tylko bez tych @.

    OdpowiedzUsuń

Publikowanie komentarza

Popular

[HTML] Jak wstawić obrazek?

[PHP|HTML] Odświeżenie strony

[PHP] Jak sprawdzić typ zmiennej?