Hvordan Sentrer objekter på websiden din

Sentrert objekter kan formidle en følelse av balanse og symmetri i et design. Mange websider som du ser på Internett skjermen sentrert overskrifter, bilder og andre elementer. Du ønsker kanskje å sentrere et bord eller en registreringsskjemaet på en av dine egne nettsider. HTML, kodespråket som brukes til å lage websider, gir ikke en praktisk "center denne" tag. Du kan fortsatt plasser gjenstander i sentrum av dine websider ved hjelp av Cascading Style Sheets (CSS).

Bruksanvisning

1 Start Notepad og åpne et HTML-dokument som definerer en av dine nettsteder.

2 Legg inn følgende HTML-kode for å dokumentets "body" -delen:

<Div class = "centerItem">

<Img />

<H1> Sentrert Overskrift </ h1>

</ Div>

Dette skaper en "div" blokk. Denne blokken inneholder et bilde og en overskrift. Erstatt "xyz.jpg" med navnet på et bilde på harddisken. Ta med hele banen til det bildet. For eksempel, hvis en fil som heter "clean.jpg" er i "Todo" mappe på "C" -stasjonen, den img-taggen vil lyde som følger:

<Img />

3 Gjennomgå "div" tag erklæring vist i forrige trinn. At tag refererer til en CSS-klasse som heter "centerItem." Den "centerItem" -klassen inneholder definisjonene for å sentrere "div" blokk og de to objektene inne i blokken.

4 Plasser følgende CSS-koden hvor som helst i dokumentet "head" -seksjonen:

<Style type = "text / css">

.centerItem {

margin: 0 auto;

width: 400px;

text-align: center;

border: 2px solid;

}

</ Style>

Dette skaper "centerItem" CSS-klasse referert i forrige trinn. Dens margin verdiene "0 auto". Å gi margverdiene fører leseren å sentrere "div" block. Bredden eiendom definerer en bredde for at "div" block. I dette eksempel er at bredden 400 piksler. Du kan angi at bredden til noe du liker. Den "text-align: center" eiendomssentre objektene i "div" blokk. Siden den blokk inneholder et bilde og en overskrift, vil disse objektene vises sentrert innenfor "div" block. Grensen eiendom bare setter en ramme rundt "div" block. Det gjør det lettere å se blokken ved testing. Denne grensen er valgfritt. Hvis du ikke vil ha en ramme rundt "div" blokk, slette linjen som leser "border: 2px solid;"

5 Lagre HTML-fil. Åpne den i nettleseren din. Du vil se "div" blokk i sentrum av websiden. Inne denne blokken, vil du også se ditt bilde og overskriften sentrert i blokken.

Hint

  • Du kan lage så mange "div" blokker som du vil. Du kan også navngi CSS-klasse noe. I dette eksemplet er det navnet ".centerItem".