Hvordan lage innhold i midten med CSS

Det er ingen fast måte å fortelle en nettleser for å sentrere en del av websiden. Du kan midt justere teksten, men dette er ikke det samme som sentre en boks eller plassere en vanlig, venstrestilt punkt i sentrum av en side. For å sentrere innhold i midten av noen del av siden, må du gi en bredde og automatisk venstre og høyre marg til at innholdet er element. For å gjøre sentrebakoverkompatibel med eldre Internet Explorer versjon, må du også justere tekstjustering innstillinger.

Bruksanvisning

1 Åpne websiden i en editor eller Notisblokk og finne innholdet du ønsker å sentrere. Finn ut hva tags sjal rundt innholdet:

<P id = "mytext"> Avsnitt tekst her ... </ p>

Få ID kodene eller legge til en som vist, ved hjelp av et navn som er unikt og lett å huske.

2 Få kodene av innholdet overordnede element. Den av foreldrene er et element som inneholder en eller flere kjedede "barn" elementer, for eksempel en div - forelder - med mange avsnitt:

<Div id = "container">
<P id = "mytext"> Avsnitt tekst her ... </ p>
</ Div>

I dette eksempel "beholder" er den overordnede og "mytext" er barnet. Du trenger ID av begge disse elementene.

3 Åpne stilark for websiden. Hvis du ikke allerede har et eksternt stilark sydd for dine websider, legge til CSS mellom "<style>" koder i hodet av HTML-koden:

<Style type = "text / css">
</ Style>

4 Lag en stil regel for elementet du ønsker å sentrere. Gi denne element "auto" venstre og høyre marg. Elementet trenger også en bredde, enten i piksler som "50 piksler" eller en prosentandel som ". 50%" I de fleste nettlesere, vil dette føre til at innholdet for å sentrere innenfor den overordnede element:

mytext {

margin-left: auto;
margin-right: auto;
width: 300px;
}

5 Skriv en stil regel for den overordnede element og angi tekstjustering eiendom til "sentrum". Noen eldre versjoner av Internet Explorer krever denne innstillingen. Når du bruker dette trikset, derimot, må du sette hvert barn elements tekstjustering tilbake til normalen, med mindre du vil ha tekst innenfor disse elementene sentrert også:

container {

text-align: center;
}

mytext {

margin-left: auto;
margin-right: auto;
width: 300px;
text-align: left;
}