Hvordan Sentrer en div tag på side med CSS

Hvordan Sentrer en div tag på side med CSS


Siden Cascading Style Sheet kode kom i vanlig bruk, Webdesignere droppet bord-koding teknikker til fordel for CSS-baserte layouter. Forvirring omgir teknikker som kreves for posisjonering <div> og lignende kodene ved hjelp av CSS, though. Dette er fordi ingen rett-frem måte finnes for å gjøre enkle ting som å sentre elementer på sidene. Du kan midt <div> tagger i CSS ved å manipulere marginer og sette bredder, og sette tekstjustering på en inneholder <div> gjør alt arbeid selv på Internet Explorer 6.

Bruksanvisning

1 Bruk en kode editor som jEdit, BBEdit eller Notepad ++ til å åpne HTML-filen for siden som inneholder <div> du ønsker å sentrere. Finn <div> du ønsker å sentrere og ta notat av sin ID-attributtet. Hvis du ikke ser en ID-attributtet i <div> tag, legge det slik:

<Div id = "sentrert"> innhold ... </ div>

Du kan kalle ID-attributtet hva du vil, men velge et navn som er unikt og meningsfylt.

2 Legg en container <div> rundt <div> du ønsker å sentrere. Dette <div> tag vil sette opp en spesiell plass på siden der du kan sentrere alt du vil, selv en nestet <div> element. Her er et eksempel:

<Div id = "container">

<Div id = "sentrert"> innhold ... </ div>

</ Div>

Navn beholderen <div> hva du vil, men de fleste designere bruker navn som "container" eller "wrap". Kontroller at ID-attributtet ikke er i konflikt med andre HTML tag IDer i HTML-filen, skjønt.

3 Legg inn CSS-koden for å sentrere <div> tag. Du bør legge denne koden til en ekstern CSS-fil, og hvis nettstedet allerede bruker en, vil du se kode som dette mellom <head> taggene:

<Link rel = "stylesheet" href = "style.css" type = "text / css">

Hvis du ser at kode, og deretter åpne opp "style.css" fil. Du kan også legge til <style> og </ style> kodene mellom <head> tags og legge til kode mellom disse, men deretter CSS-koden vil kun påvirke HTML-filen der du har lagt inn koden.

4 Bruk denne CSS-kode for å sentrere en <div> innenfor en inneholder <div>:

container {text-align: center;} sentrert {margin-left: auto; margin-right: auto; width: 200px; text-align: left;}

Gi den inneholder <div> en sentrert justering for å gjøre sentrert <div> vises riktig i Internet Explorer 6. Bruk auto marginer på sentrert <div> for å sentrere den i moderne nettlesere. Du må legge til en bredde på sentrert <div> for sentre å fungere. Tilbaketekstjustering slik at tekst ikke også blir sentrert.