Hvordan Juster grafikk i en div tag

November 21

Justere grafikk på websider krever bruk av CSS eller Cascading Style Sheets å skrive stil regler for disse grafikk. Stil regler bestå av velgere - biter av kode som er rettet mot spesifikke deler av websiden - og eiendom-verdi-par som setter størrelser, farger og mer. Du kan begrense din stil regler for å referere kun grafikk i et bestemt div ved å legge til ID-velgeren for at div foran noen velger som referanse til bildene selv. Bruk klasse navn for bildene dine slik at du kan skrive en eller to stilregler i CSS og re-bruke dem på flere grafikk.

Bruksanvisning

1 Åpne websiden i Notepad eller en kode editor. Legg inn "<div>" tags med et ID-navn, slik at du kan referere til den i CSS senere:

</ Div>

2 Legg inn tekst mellom åpning og lukking "<div>" koder. Uansett hvor du ønsker å legge til grafikk, bruker du denne koden:

Change "sti / til / image.png" for å matche banen til bildet på webserveren. Bruk "alt" -attributtet for å gi din grafiske alternativ tekst i nettleseren kan vise når grafikken ikke lastes inn.

3 Gi hver "<img>" tagge et klassenavn:

Bruk klasse navn som "venstre" eller "høyre". Du kan bruke samme klasse navn flere ganger i løpet av den samme nettsiden.

4 Finn "<style>" tags mellom "<head>" koder i koden på websiden. Legg til "<style>" koder hvis du ikke finner dem:

</ Style>

5 Skriv stilregler for hver klasse du ga grafikk i div:

Bildene .left {

float: left;

margin-right: 10px;

}

Bildene .right {

float: right;

margin-left: 10px;

}

Eksemplene ovenfor viser hvordan du kan lage "venstre" og "riktige" stil regler å diktere justeringen av bildene i deg div. Endre "bilder" til ID-navnet på div. Bruk format ".classname" når du henviser klasser.

Hint

Selv om du ikke kan bryte tekst rundt et sentrert bilde ved hjelp av denne metoden, kan du legge til en sentrert stil ved hjelp av "margin: 0 auto;" i stedet for å flyter. Tekst vises over og under bildet.