Projekty stron internetowych dla firm i innych organizacji często zawierają dobrze zdefiniowane elementy brandingu i marketingu. Jeśli witryna ma stronę internetową, którą chcesz wyśrodkować, możesz zrobić to sam, używając kombinacji kodu HTML i CSS (Cascading Style Sheet). Wielu programistów używa właściwości przewijania elementów stron internetowych do dyktowania właściwości centrowania, ale nie zawsze jest to niezawodne. Aby zdefiniować wyśrodkowany układ strony i stronę, która pojawi się bez pasków przewijania, wymagane są kilka deklaracji CSS.

1.

Utwórz swoją stronę HTML. Jeśli masz stronę, nad którą już pracujesz, otwórz ją. W przeciwnym razie utwórz nowy plik w edytorze tekstu i zapisz go z rozszerzeniem ".html". Użyj następującego konspektu:

Zauważ, że strona zawiera sekcję dla kodu CSS w głowie i element w ciele. Treść strony powinna być umieszczona wewnątrz tego elementu. Jeśli pracujesz z istniejącą stroną, znajdź dla niej kod CSS, który może być przechowywany w oddzielnym pliku CSS połączonym z twoim nagłówkiem strony.

2.

Zidentyfikuj kontener strony w CSS. Aby stylizować element zawierający, najpierw musisz go zidentyfikować w kodzie CSS. W sekcji stylu w nagłówku strony lub osobnym pliku, jeśli właśnie z tym pracujesz, dodaj następujący selektor i konspekt:

pojemnik {

}

To identyfikuje element z "kontenerem" jako jego atrybutem ID. Deklaracje stylu dla elementu pojawią się między nawiasami otwierającymi i zamykającymi. Możesz także zidentyfikować element, używając wartości atrybutu klasy w następujący sposób:

.pojemnik {

}

Zidentyfikuje to następujący element:

3.

Zastosuj stałą szerokość do elementu, aby wyśrodkować jego zawartość. Aby wyśrodkować elementy na stronie, element zawierający musi mieć stałą szerokość. Dodaj jeden między nawiasami CSS dla elementu "container" w następujący sposób:

szerokość: 800 pikseli;

Zmień wartość wysokości, aby pasowała do Twojego projektu. Teraz możesz zastosować właściwość margin, która zmusi element do wyśrodkowania na stronie:

margin: auto;

4.

Zapobiegaj przewijaniu elementu. Jeśli nie chcesz przewijać strony, musisz zastosować właściwość height do elementu kontenera w następujący sposób:

wysokość: 90%;

Zmień wartość pasującą do Twojego projektu. Jeśli elementy wewnątrz kontenera zajmują więcej miejsca niż to i nie chcesz przewijać, musisz ukryć przepełnienie elementu w następujący sposób:

przepełnienie: ukryte;

Spowoduje to zatrzymanie paska przewijania, nawet jeśli zawartość strony przekracza wysokość przydzieloną w przeglądarce użytkownika.

5.

Zapisz i wyświetl swoją stronę. Otwórz go w przeglądarce lub prześlij do swojej witryny, aby wyświetlić wynik. Być może trzeba będzie wprowadzić poprawki, aby uzyskać pożądany wygląd. Upewnij się, że przetestujesz stronę po jej ukończeniu, ponieważ jej wygląd może się znacznie różnić.

Wskazówka

• Różne przeglądarki internetowe implementują reguły CSS na różne sposoby, więc upewnij się, że przetestujesz swoje strony w więcej niż jednym miejscu.

Ostrzeżenie

• Ukrywanie przepełnienia elementu strony internetowej może uniemożliwić niektórym użytkownikom obejrzenie całej zawartości strony.