[HTML] Jak wycentrować stronę?

Wbrew pozorom, wyśrodkowanie strony 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ć wyśrodkowane 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ść strony 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. Anonimowy1 marca 2014 20:04

    czy ktoś wie jak OSTYLOWAĆ kontenra? ? ?

    OdpowiedzUsuń
  2. Anonimowy30 lipca 2014 18:56

    <@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ń

Prześlij komentarz

Dzięki za komentarz!

Popular

[C++] Jak obliczyć pole i obwód trapezu?

Przed napisaniem programu obliczającego pole i obwód trapezu, przypomnij sobie wzory. Pole trapezu liczymy według wzoru P=((a+b)*h)/2. Wzór na obwód Ob=a+b+c+d. Obliczając pole trapezu musimy znać rozmiary dwóch podstaw i wysokości. Obliczamy pole trapezu #include <iostream> using namespace std; int main() { int a; int b; int h; double p; cout << "Podaj długość podstawy a: "; cin >> a; cout << "Podaj długość podstawy b: "; cin >> b; cout << "Podaj wysokość: "; cin >> h; if(cin.good() == true) { p = ((a + b) * h) / 2.0; cout << "Pole trapezu wynosi: " << p; } return 0; } Obliczamy obwód trapezu #include <iostream> using namespace std; int main() { int a, b, c, d, ob; cout << "Podaj długość boku a: "; cin >> a; cout << "Podaj długość boku b: "; cin >> b; cout << "Podaj długość boku c: "; cin >> c;
Czytaj więcej

[PHP] Jak pobrać adres strony?

Gdy zajdzie potrzeba pobrania adresu strony, na której użytkownik aktualnie się znajduje, posłużyć się można do tego celu tablicą $_SERVER z kluczem 'SERVER_NAME'. Pobranie adresu strony, na której znajduje się użytkownik sprowadza się dosłownie do połączenia dwóch elementów tablicy $_SERVER: SERVER_NAME oraz REQUEST_URI . Element o kluczu 'SERVER_NAME' zawiera nazwę hosta serwera, na którym wykonywany jest skrypt, a element z kluczem 'REQUEST_URI' pobiera wszystko to, co zostało wpisane po nazwie domeny np. '/index.php'. Tak więc, aby wyświetlić adres strony lub adres do skryptu, łączymy te dwa elementy: echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; Powyższy przykład wyświetli nam URL, pod którym aktualnie się znajdujemy, ale bez przedrostka http/https. Aby do ciągu z URL'em dołączana była nazwa protokołu, musimy użyć jeszcze jednego elementu tablicy $_SERVER, a mianowicie HTTPS , który nie będzie pusty, jeśli żądanie
Czytaj więcej

[HTML] Jak wyśrodkować tekst?

Wyśrodkowanie tekstu w HTML nie jest trudne. Wystarczy tylko zastosować odpowiednią regułę CSS dla elementu, w którym znajduje się dany tekst. W tym przypadku chodzi o regułę text-align:center . Przykład Załóżmy, że mamy nagłówek h1 z tytułem strony i chcemy, aby był on umieszczony po środku. Dopisujemy do niego następujący fragment: style="text-align:center;" - tak jak poniższym przykładzie: <h1 style="text-align:center;">Hello World!</h1> Analogicznie robimy dla innych elementów HTML.
Czytaj więcej