Webbdesign för företag och andra organisationer innehåller ofta väldefinierade varumärkes- och marknadsföringselement. Om din webbplats har en webbsida du vill ha centrerad kan du göra det själv med hjälp av en kombination av HTML och CSS (Cascading Style Sheet) -koden. Många utvecklare använder rullningsegenskaper för webbsidor för att diktera centreringsegenskaper, men det är inte alltid tillförlitligt. För att definiera en centrerad webbplatslayout och en sida som kommer att visas utan rullgardiner krävs några CSS-deklarationer.

1.

Skapa din HTML-sida. Om du har en sida som du redan arbetar med, öppna den. Annars skapa en ny fil i en textredigerare och spara den med ".html" -tillägget. Använd följande skiss:

Observera att sidan har en sektion för CSS-kod i huvudet och ett element i kroppen. Innehållet på sidan ska placeras inuti detta element. Om du arbetar med en befintlig sida, leta reda på CSS-koden för den, som kan lagras i en separat CSS-fil kopplad till från ditt sidhuvud.

2.

Identifiera sidbehållaren i CSS. För att utforma det innehållande elementet måste du först identifiera det i CSS-kod. I avsnittet Stil i ditt sidhuvud eller en separat fil om det är vad du jobbar med, lägg till följande väljare och skissera:

behållare {

}

Detta identifierar elementet med "behållare" som dess ID-attribut. Stildeklarationerna för elementet kommer att visas mellan öppnings- och stängningsfästena. Alternativt kan du identifiera elementet med ett klassattributvärde enligt följande:

.behållare {

}

Detta skulle identifiera följande element:

3.

Applicera en fast bredd på elementet för att centrera dess innehåll. För att centrera elementen på din sida måste det innehålla elementet ha en fast bredd. Lägg till en mellan CSS-parenteserna för "behållarelementet" enligt följande:

bredd: 800px;

Ändra höjdvärdet som passar din design. Nu kan du tillämpa en marginalegenskap som kommer att tvinga elementet att centreras på sidan:

marginal: auto;

4.

Förhindra att elementet rullar. Om du inte vill att sidan ska bläddra måste du ange en höjdfastighet till behållarelementet enligt följande:

höjd: 90%;

Ändra värdet som passar din design. Om elementen inuti behållaren upptar mer utrymme än detta och du vill förhindra att du rullar, måste du gömma elementflödet enligt följande:

overflow: hidden;

Detta kommer att hindra rullningsfältet att visas även om ditt sidinnehåll upptar mer än den tilldelade höjden i användarens webbläsare.

5.

Spara och visa din sida. Öppna den i en webbläsare eller ladda upp den till din webbplats för att se resultatet. Du kan behöva göra justeringar för att komma fram till den design du vill ha. Se till att du testar sidan när du har det färdiga innehållet i det, eftersom dess utseende kan variera betydligt.

Tips

• Olika webbläsare implementerar CSS-regler på olika sätt, så se till att du testar dina sidor i mer än en.

Varning

• Att dölja överflödet på ett webbsidelement kan förhindra att några av dina användare ser allt innehåll på din sida.