Horisontal og vertikal justering af elementer i CSS. Juster blokken til midten af ​​siden

I dag, kære læser, vil vi beskæftige os med problemet med lodret justering i en blok div.

Mest sandsynligt ved du allerede om eksistensen af ​​den vidunderlige CSS-ejendom vertical-align. Og Gud selv beordrede os til at bruge netop denne egenskab til vertikal justering (det er ikke for ingenting, at det har et så selvforklarende navn).

Problemformulering: Det er nødvendigt at justere indholdet af en blok med variabel højde centreret i forhold til lodret.

Lad os nu begynde at løse problemet.

Og så har vi en blok, dens højde kan ændre sig:

Bloker indhold

Det første, der kommer til at tænke på, er at lave følgende finte:

Bloker indhold

Der er al mulig grund til at tro, at sætningen Bloker indhold vil blive justeret til centerhøjden af ​​div-beholderen.

Men det var der ikke! Vi vil ikke opnå nogen forventet centertilpasning på denne måde. Og hvorfor? Det ser ud til, at alt er angivet korrekt. Det viser sig, at dette er rubbet: ejendommen lodret justere kan kun bruges til at justere indholdet af tabelceller eller til at justere inline-elementer i forhold til hinanden.

Med hensyn til justering inde i en tabelcelle, tror jeg, at alt er klart. Men jeg vil forklare en anden sag med inline-elementer.

Lodret justering af inline-elementer

Antag, at du har en tekstlinje, der er opdelt af linjemærker i dele:

Et stykke tekst byder dig velkommen!

Et inline-tag er en container, hvis udseende ikke får indholdet til at ombrydes til en ny linje.

Blokeringsmærkets handling får indholdet af beholderen til at ombrydes til en ny linje.

er et blokmærke. Hvis vi omslutter tekststykker i blokke , så vil hver af dem være på en ny linje. Bruger tag , som i modsætning til , er små bogstaver, vil containere ikke blive flyttet til en ny linje, alle containere vil forblive på samme linje.

Beholder praktisk at bruge, når du angiver en del af teksten med speciel formatering (fremhæver den med en farve, en anden skrifttype osv.)

Til containere Anvend følgende CSS-egenskaber:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Den resulterende tekstlinje vil se sådan ud:

Dette er intet andet end vertikal justering af inline-elementer, og CSS vertical-align-egenskaben klarer denne opgave perfekt.

Vi blev lidt distraheret, nu vender vi tilbage til vores hovedopgave.

Lodret justering i div container

Uanset hvad, vil vi bruge egenskaben vertical-align til justering i div-beholderen. Som jeg allerede har sagt, kan denne egenskab bruges i tilfælde af justering af inline-elementer (vi diskuterede denne sag i detaljer ovenfor, og den er ikke egnet for os til justering i en div-beholder); det eneste, der er tilbage, er at bruge det faktum lodret justere virker til tabelceller.

Hvordan kan vi bruge dette? Vi har ikke et bord, vi arbejder med en div container.

Ha, det viser sig at være meget simpelt.

CSS-visningsegenskaben giver os mulighed for at omdanne vores div-blok til en tabelcelle, dette kan gøres nemt og naturligt:

Lad os sige, at vi har en klasse div tekstjustering:

Bloker indhold

For denne blok specificerer vi følgende CSS-egenskab:

Textalign( display: tabel-celle; )

Denne CSS-instruktion vil mirakuløst gøre vores div til en tabelcelle uden visuelt at ændre den på nogen måde. Og for en tabelcelle kan vi anvende egenskaben lodret justere fuldt ud, og den ønskede lodrette justering vil fungere.

Alt kan dog ikke ende så enkelt. Vi har en vidunderlig IE-browser. Han ved ikke, hvordan han skal arbejde med ejendommen display: tabel-celle(Jeg foreslår, at du læser tabellen, der illustrerer funktionaliteten af ​​denne CSS-egenskab i forskellige browsere på webstedet htmlbook.ru). Derfor bliver vi nødt til at ty til forskellige tricks.

Der er mange måder at opnå justering i en div-beholder for alle browsere:

• Fremgangsmåde ved hjælp af en ekstra hjælpe-div-beholder
• Metode ved hjælp af udtryk. Det er forbundet med en vanskelig beregning af blokhøjder. Du kan ikke gøre dette uden kendskab til JavaScript.
• Brug af egenskaben linjehøjde. Denne metode er kun egnet til lodret justering i en blok med kendt højde og er derfor ikke anvendelig i det generelle tilfælde.
• Brug af absolut og relativ indholdsforskydning i tilfælde af IE-browser. Denne metode forekommer mig at være den mest forståelige og enkle. Derudover kan den implementeres til en div container med variabel højde. Vi vil dvæle ved det mere detaljeret.

Som du forstår, skal vi bare løse problemet med vertikal justering i IE forbundet med dets misforståelse af ejendommen display: tabel-celle(hverken IE6, IE7 eller IE8 er bekendt med denne egenskab). Derfor vil vi ved at bruge en betinget kommentar specifikt til browsere i IE-familien angive andre CSS-egenskaber.

Betinget kommentar

Konstruktionstype:

... Instruktioner, der kun gælder, hvis betingelsen i firkantede parenteser er sand...

kaldes en betinget kommentar (vær forsigtig, typen af ​​betinget kommentar skal helt svare til det angivne eksempel, op til et mellemrum).

Instruktionerne i en sådan betinget kommentar vil kun blive udført, hvis browseren, der fortolker denne kode, tilhører IE-familien.

Ved hjælp af en betinget kommentar kan vi således skjule et stykke kode fra alle browsere undtagen IE.

Løsningen af ​​problemet

På grund af al denne persille bliver vi nødt til at forsyne vores HTML-kode med to ekstra beholdere. Sådan kommer vores tekstblok til at se ud:

Dette er en form for bekræftelsestekst.
Den består af to linjer.

For div container klasse tekstalign CSS-egenskaber er indstillet, der justerer indholdet lodret for alle normale browsere (undtagen IE, selvfølgelig):

Display: tabel-celle; vertikal-align: midt;

Og yderligere to egenskaber, der indstiller bredden og højden for blokken:

Bredde:500px; højde: 500px;

Dette er ganske nok til at justere indholdet af beholderen lodret i alle browsere undtagen IE.

Nu begynder vi at tilføje egenskaber relateret til justering for browsere i IE-familien (det er for dem, vi brugte yderligere blokke div Og span):

Med henvisning til tagget div inde i en klasseblok tekstalign. For at gøre dette skal du først angive navnet på klassen og derefter, adskilt af et mellemrum, det tag, som vi har adgang til.

Textalign div( position: absolut; top: 50%; )

Dette design betyder: for alle div-tags inde i en blok med en klasse tekstalign anvende de anførte ejendomme.

Følgelig de stilarter, der er angivet for blokken tekstalign er ændret:

Textalign( display: tabel-celle; vertikal-align: middle; width:500px; højde: 500px; position: relativ; )

Nu er det øverste venstre punkt i tekstblokken flyttet 50 % ned.

For at forklare, hvad der sker, tegnede jeg en illustration:

Som du kan se på billedet, har vi gjort nogle fremskridt. Men det er ikke alt! Det øverste venstre punkt på den gule blok er faktisk flyttet 50% ned i forhold til den overordnede (lilla) blok. Men vi skal bruge halvtreds procent af højden af ​​den lilla blok for at være midten af ​​den gule blok, og ikke dens øverste venstre punkt.

Nu vil tagget komme i spil span og dens relative placering:

Textalign span( position: relativ; top: -50%; )

Således har vi flyttet den gule blok op med 50 % af dens højde i forhold til dens udgangsposition. Som du forstår, er højden af ​​den gule blok lig med højden af ​​det centrerede indhold. Og den sidste operation på span containeren placerede vores indhold i midten af ​​den lilla blok. Hurra!

Lad os snyde lidt

Først og fremmest skal vi skjule persille fra alle normale browsere og åbne den for IE. Dette kan selvfølgelig gøres ved at bruge en betinget kommentar, det er ikke for ingenting, at vi har stiftet bekendtskab med det:

.textalign div( position: absolut; top: 50%; ) .textalign span( position: relativ; top: -50%; )

Der er et lille problem. Hvis det centrerede indhold er for højt, fører det til ubehagelige konsekvenser: der er en ekstra højde for den lodrette rulle.

Løsning på problemet: du skal tilføje en ejendom overløb: skjult blok tekstalign.

Lær ejendommen at kende i detaljer flyde over muligt i.

De endelige CSS-instruktioner for blokken tekstalign har formen:

Textalign( display: tabel-celle; vertikal-align: midt; bredde: 500px; højde: 500px; position: relativ; overløb: skjult; kant: 1px ensfarvet sort; )

Undskyld, jeg glemte at nævne et vigtigt punkt. Hvis du forsøger at indstille højden på en klasseblok tekstalign i procent, så vil intet lykkes for dig.

Centrering i variabel højde blok

Meget ofte er der behov for at indstille højden på en klasseblok tekstalign ikke i pixels, men som en procentdel af højden af ​​den overordnede blok, og juster indholdet af div-beholderen på midten.

Fangsten er, at det er umuligt at gøre dette for en tabelcelle (men klasseblokken tekstalign bliver præcis til en tabelcelle, takket være egenskaben display: tabel-celle).

I dette tilfælde skal du bruge en ekstern blok, for hvilken CSS-egenskaben er specificeret display: tabel og allerede indstille den procentvise værdi af højden for det. Derefter indlejrede blokken i den med CSS-direktivet display: tabel-celle, vil med glæde arve højden af ​​den overordnede blok.

For at implementere en variabel højde blok i vores eksempel, vil vi redigere CSS lidt:

Til klassen tekstalign vi ændrer ejendomsværdien Skærm Med tabel-celle på bord og fjern tilpasningsdirektivet lodret-align: midten. Nu kan vi roligt ændre højdeværdien fra 500 pixels til for eksempel 100%.

Altså CSS-egenskaberne for klasseblokken tekstalign vil se sådan ud:

Textalign( display: tabel; bredde: 500px; højde: 100%; position: relativ; overløb: skjult; kant: 1px ensfarvet sort; )

Det eneste, der er tilbage, er at implementere indholdscentrering. For at gøre dette indlejrede en div-beholder i en klasseblok tekstalign(dette er den samme gule blok på billedet), skal du indstille CSS-egenskaben display: tabel-celle, så vil den arve højden på 100 % fra den overordnede blok tekstalign(lilla blok). Og intet vil forhindre os i at tilpasse indholdet af den indlejrede div-beholder i midten med ejendommen lodret-align: midten.

Vi får endnu en ekstra liste over CSS-egenskaber for div-blokken indlejret i containeren tekstalign.

Textalign div( display: table-cell; vertical-align: middle; )

Det er hele tricket. Hvis det ønskes, kan du have en variabel højde med indholdet centreret.

For mere information om lodret justering af en blok med variabel højde, se.

Hver layoutdesigner står konstant over for behovet for at tilpasse indhold i en blok: vandret eller lodret. Der er flere gode artikler om dette emne, men de byder alle på en masse interessante, men få praktiske muligheder, hvorfor du skal bruge ekstra tid på at fremhæve hovedpunkterne. Jeg besluttede at præsentere disse oplysninger i en form, der er praktisk for mig, for ikke at google længere.

Justering af blokke med kendte størrelser

Den nemmeste måde at bruge CSS på er at justere blokke, der har en kendt højde (til lodret justering) eller bredde (til vandret justering).

Justering ved hjælp af polstring

Nogle gange kan du ikke centrere et element, men tilføje grænser til det ved hjælp af egenskaben "padding".

For eksempel er der et billede på 200 gange 200 pixels, og du skal centrere det i en blok på 240 gange 300. Vi kan indstille højden og bredden af ​​den ydre blok = 200px, og tilføje 20 pixels øverst og nederst , og 50 til venstre og højre.

.example-wrapper1 (baggrund : #535E73 ; bredde : 200px ; højde : 200px ; polstring : 20px 50px ; ) Juster absolut placerede blokke

Hvis en blok er sat til "position: absolut", så kan den placeres i forhold til sin nærmeste forælder med "position: relativ". For at gøre dette skal du tildele den samme værdi til alle egenskaber ("top",,"højre",,"neder","venstre"), samt "margin: auto".

*Der er en nuance: Bredden (højden) af den indre blok + værdien af ​​venstre (højre, bund, top) bør ikke overstige dimensionerne af den overordnede blok. Det er mere sikkert at tildele 0 (nul) til venstre (højre, nederst, øverst) egenskaber.

.example-wrapper2 (position : relativ ; højde : 250px ; baggrund : url(space.jpg) ; ) .cat-king ( bredde : 200px ; højde : 200px ; position : absolut ; top : 0 ; venstre : 0 ; bund : 0 ; bund 0 ; højre : 0 : margin : url(king.png) ;

For at justere tekst i en blok er der en speciel egenskab "tekst-align". Når den er indstillet til "center", vil hver tekstlinje blive justeret vandret. For tekst med flere linjer bruges denne løsning ekstremt sjældent. Denne mulighed kan findes til at justere spænd, links eller billeder.

Jeg skulle engang finde på noget tekst for at vise, hvordan tekstjustering fungerer ved hjælp af CSS, men der kom ikke noget interessant i tankerne. Først besluttede jeg at kopiere et børnerim et eller andet sted, men jeg huskede, at dette kunne ødelægge artiklens unikke karakter, og vores kære læsere ville ikke kunne finde det på Google. Og så besluttede jeg at skrive dette afsnit - pointen er jo ikke med den, men pointen er på linje.

.example-text ( tekst-align : center ; polstring : 10px ; baggrund : #FF90B8 ; )

Det er værd at bemærke, at denne egenskab vil fungere ikke kun for tekst, men også for alle inline-elementer ("display: inline").

Men denne tekst er justeret til venstre, men den er i en blok, der er centreret i forhold til omslaget.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; ) Justering blokke ved hjælp af margin

Blokelementer med en kendt bredde kan nemt justeres vandret ved at sætte dem til "margin-left: auto; margin-right: auto". Normalt bruges den stenografiske notation: "margin: 0 auto" (en hvilken som helst værdi kan bruges i stedet for nul). Men denne metode er ikke egnet til lodret justering.

.lama-wrapper ( højde : 200px ; baggrund : #F1BF88 ; ) .lama1 ( højde : 200px ; bredde : 200px ; baggrund : url(lama.jpg) ; margin : 0 auto ; )

Sådan bør du justere alle blokke, hvor det er muligt (hvor fast eller absolut positionering ikke er påkrævet) - det er det mest logiske og passende. Selvom dette virker indlysende, har jeg nogle gange set skræmmende eksempler med negative indrykninger, så jeg besluttede at præcisere.

Lodret justering

Vertikal justering er meget mere problematisk - tilsyneladende var dette ikke fastsat i CSS. Der er flere måder at opnå det ønskede resultat på, men alle er ikke særlig smukke.

Justering med linjehøjdeegenskab

I det tilfælde, hvor der kun er én linje i en blok, kan du opnå dens lodrette justering ved at bruge egenskaben "line-height" og indstille den til den ønskede højde. For at være på den sikre side bør du også indstille "højde", hvis værdi vil være lig med værdien af ​​"line-height", fordi sidstnævnte ikke understøttes i alle browsere.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

Det er også muligt at opnå blokjustering med flere linjer. For at gøre dette skal du bruge en ekstra indpakningsblok og indstille linjehøjden til den. En intern blok kan være multi-line, men skal være "inline". Du skal anvende "vertical-align: middle" på det.

.example-wrapper5 ( line-height : 160px ; højde : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : line-hex ; 1.5 ; vertikal-align : midterste

Indpakningsblokken skal have "font-size: 0" indstillet. Hvis du ikke indstiller skriftstørrelsen til nul, tilføjer browseren et par ekstra pixels. Du bliver også nødt til at angive skriftstørrelse og linjehøjde for den indre blok, fordi disse egenskaber er nedarvet fra den overordnede.

Lodret justering i tabeller

Egenskaben "vertical-align" påvirker også tabelceller. Med værdien sat til "midt", er indholdet inde i cellen justeret til midten. Selvfølgelig betragtes tabellayout nu om dage som arkaisk, men i særlige tilfælde kan du simulere det ved at angive "display: table-cell".

Jeg bruger normalt denne mulighed til lodret justering. Nedenfor er et eksempel på layout taget fra et gennemført projekt. Det er billedet, der er centreret lodret på denne måde, der er af interesse.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max. % ; min-bredde : 140px : blok : 0 auto ;

Det skal huskes, at hvis et element har et andet "float"-sæt end "ingen", så vil det under alle omstændigheder være blok (display: blok) - så skal du bruge en ekstra blokindpakning.

Justering med et ekstra inline-element

Og til inline-elementer kan du bruge "vertical-align: middle". Dette vil justere alle elementer med "display: inline", der er på samme linje i forhold til en fælles midterlinje.

Du skal oprette en hjælpeblok med en højde svarende til højden af ​​den overordnede blok, så vil den ønskede blok blive centreret. For at gøre dette er det praktisk at bruge pseudo-elementerne:før eller:efter.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; højde : .riki ( display : inline-blok ; højde : 100% ; vertikal-align : middle ; ) Display: flex og justering

Hvis du er ligeglad med Explorer 8-brugere, eller bekymrer dig så meget, at du er villig til at indsætte et stykke ekstra javascript til dem, så kan du bruge "display: flex". Flex-bokse er gode til at håndtere tilpasningsproblemer, og skriv bare "margin: auto" for at centrere indholdet inde.

Indtil videre har jeg praktisk talt aldrig stødt på denne metode, men der er ingen særlige begrænsninger for den.

.example-wrapper7 (display : flex ; højde : 300px ; baggrund : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

Nå, det var alt, hvad jeg ville skrive om CSS-justering. Nu vil centrering af indhold ikke være et problem!

Justering af elementer på en webside kan være en udfordrende opgave, især når det kommer til lodret justering af tekst. Dette spørgsmål findes ofte på fora, og det er især svært for nybegyndere at løse dette problem. Men i virkeligheden er der ikke noget kompliceret her. Alt du behøver er lidt viden om CSS Cascading Style Sheets. Da alt dette er gjort på grund af dets regler.

Lodret tekstjustering kan opnås på mindst fem forskellige måder. Hver af dem er gode på sin egen måde, givet omstændighederne og detaljerne i situationen. Vi vil se på flere eksempler, og ud fra betingelserne vælger du selv den passende rotation.

Første metode med line-højde

Den første metode er meget banal og har en stor ulempe, som begrænser dens anvendelse. Men stadig, uanset hvad man kan sige, kan det være nyttigt og endda bringe det ønskede resultat. Dette vil være en betinget justering, da vi i det væsentlige indstiller linjehøjden til at matche blokhøjden ved hjælp af egenskaben linjehøjde.

første eksempel. demo #1

første eksempel. demo #1

/* No.1 */ .talign1( kant: 1px fast rød; højde:200px;/* blokhøjde */ ) .talign1 > p( line-height:200px;/* indstil linjehøjden i henhold til blokhøjden * / margin :0;/* fjern ydre polstring, hvis nogen */ text-align:center;/* juster teksten vandret med midten */ padding: 0;/* fjern indvendig polstring, hvis nogen */ ) /* end nr. 1*/

På nøjagtig samme måde er det muligt at implementere billedet i lodret center, men ved at tilføje en ny egenskab vertikal-align: middle; .

Eksempel. Demo #2

Eksempel. Demo #2

/* No.2 */ .talign2( border: 1px solid red; line-height:200px;/* bloklinjehøjde */ ) .talign2 div( text-align:center;/* align elementer horisontalt centreret */ ) . talig2 img( vertical-align:middle;/* juster billederne lodret i midten */ kant: 1px solid sort; ) /* end №2*/

Justering med positionsegenskab

Denne metode er meget brugt i mange CSS-opgaver, herunder vores opgave. Men det skal bemærkes, at det ikke er helt perfekt og har sine bivirkninger. Dette skyldes, at elementets procent centrering vil blive centreret på den øverste venstre kant af den indre blok.

Derfor skal du indstille en negativ værdi til marginerne. Størrelsen af ​​fordybningen på toppen skal svare til halvdelen af ​​højden af ​​den indvendige blok, og fordybningen til venstre skal svare til halvdelen af ​​bredden. Dermed opnår vi det absolutte centrum.

I denne mulighed er det sandsynligvis obligatorisk at kende den nøjagtige højde og bredde af det underordnede element. Ellers kan der forekomme forkert centrering.

/* No.3 */ .talign3( kant: 1px fast rød; højde:200px;/* blokhøjde */ position: relativ; ) .talign3 div( position: absolut; top: 50%; venstre: 50%; højde : 30% bredde: 50% margin: -5% 0 -25%: 1px solid sort;

Justering med tabelegenskab

Her bruger vi en gammel teknik, der gør elementerne til en tabel med celler. I dette tilfælde tags tabellen

vil ikke gælde, men vil bruge CSS-egenskaber såsom display: table; , display: tabel-celle; . I ældre versioner af IE virker denne metode ikke, og den er ikke nødvendig. Er der andre, der rent faktisk bruger dem?

Eksempel. demo #4

Eksempel. demo #4

/* No.4 */ .talign4( kant: 1px fast rød; højde:200px;/* blokhøjde */ display: tabel; bredde: 100%; ) .talign4 div( display: tabel-celle; vertikal-align: middle ; text-align:center ) /* end #4*/

Opretning med flex ejendom

Dette er en mere specifik version med egenskaber, der ikke så ofte findes i hjemmesidens layout. Men ikke desto mindre er de i sjældne tilfælde meget nyttige.

Vlad Merzhevich

På grund af det faktum, at indholdet af tabelceller samtidigt kan justeres horisontalt og vertikalt, udvides mulighederne for at styre elementernes position i forhold til hinanden. Tabeller giver dig mulighed for at indstille justeringen af ​​billeder, tekst, formularfelter og andre elementer i forhold til hinanden og websiden som helhed. Generelt er justering hovedsageligt nødvendig for at etablere visuelle forbindelser mellem forskellige elementer, såvel som for at gruppere dem sammen.

Lodret centrering

En måde at vise den besøgende webstedets fokus og navn på er at bruge en splash-side. Dette er den første side, hvor der som regel er en flash-splash-skærm eller et billede, der udtrykker hovedideen på webstedet. Billedet er også et link til andre dele af webstedet. Du skal placere dette billede i midten af ​​browservinduet, uanset skærmopløsningen. Til dette formål kan du bruge et bord med en bredde og højde på 100 % (eksempel 1).

Eksempel 1: Centrering af tegningen

JusteringsTABEL ( bredde: 100%; /* Bordbredde */ højde: 100%; /* Bordhøjde */ )

I dette eksempel indstilles horisontal justering ved hjælp af tagparameteren align="center". , og indholdet af cellen er muligvis ikke centreret lodret, da dette er standardpositionen.

For at indstille bordhøjden til 100% skal du fjerne , koden vil ikke længere være gyldig.

Brug af bredden og højden til at dække hele det tilgængelige område af websiden sikrer, at indholdet af tabellen vil blive justeret nøjagtigt i midten af ​​browservinduet, uanset dets størrelse.

Horisontal justering

Ved at kombinere attributterne align (horisontal justering) og valign (lodret justering) for tagget , er det tilladt at indstille flere typer positioner af elementer i forhold til hinanden. I fig. Figur 1 viser måder at justere elementer vandret på.

Lad os se på nogle eksempler på tekstjustering i henhold til figuren nedenfor.

Topjustering

For at angive topjusteringen af ​​celleindhold, for et tag du skal indstille valign-attributten med værdien øverst (eksempel 2).

Eksempel 2: Brug af valign

Justering

Kolonne 1

Kolonne 2

I dette eksempel styres cellekarakteristika ved hjælp af tag-parametre , men det er også mere praktisk at ændre gennem stilarter. Især justeringen i celler er specificeret af egenskaberne lodret justering og tekstjustering (eksempel 3).

Eksempel 3: Anvendelse af typografier til justering

Alignment TABLE ( width: 100%; /* Table width */ ) #col1 ( width: 75%; /* First column width */ background: #f0f0f0; /* First column background color */ ) #col2 ( width: 25 %; /* Bredde af anden kolonne */ baggrund: #fc5; /* Baggrundsfarve for anden kolonne */ tekst-justering: højre /* Højrejustering */ ) #col1, #col2 ( vertikal-align: top; ; / * Topjustering */ polstring: 5px /* Marginer omkring celleindhold */ )

Kolonne 1

Kolonne 2

For at forkorte koden bruger dette eksempel gruppering af vælgere, fordi egenskaberne for lodret justering og udfyldning anvendes på to celler på samme tid.

Bundjustering udføres på samme måde, men i stedet for topværdien bruges bund.

Center justering

Som standard er celleindhold justeret til midten af ​​deres lodrette linje, så hvis kolonnerne har forskellige højder, skal du indstille justeringen til den øverste kant. Nogle gange er du stadig nødt til at forlade den oprindelige justeringsmetode, for eksempel når du placerer formler, som vist i fig. 2.

I dette tilfælde er formlen placeret strengt i midten af ​​browservinduet, og dens nummer er placeret på højre kant. For at arrangere elementerne på denne måde skal du bruge en tabel med tre celler. De ydre celler skal have samme dimensioner, i den midterste celle er justeringen centreret, og i den højre celle - langs højre kant (eksempel 4). Dette antal celler er påkrævet for at sikre, at formlen er placeret i midten.

Eksempel 4: Formeljustering

Justering

(18.6)

I dette eksempel efterlades den første celle i tabellen tom, den tjener kun til at skabe et indrykning, som i øvrigt også kan indstilles ved hjælp af stile.

Justering af formularelementer

Ved hjælp af tabeller er det praktisk at bestemme placeringen af ​​formularfelter, især når de er spækket med tekst. En af designmulighederne for formularen, som er beregnet til at indtaste en kommentar, er vist i fig. 3.

For at sikre, at teksten ved siden af ​​formularfelterne er højrejusteret, og selve formularelementerne er venstrejusterede, skal du bruge en tabel med en usynlig kant og to kolonner. Den venstre kolonne vil indeholde selve teksten, og den højre kolonne vil indeholde tekstfelter (eksempel 5).

Eksempel 5: Justering af formularfelter

Justering

Navn
E-mail
En kommentar

I dette eksempel, for de celler, hvor højrejustering er påkrævet, tilføjes attributten align="right". For at sikre, at kommentaretiketten er placeret øverst i flerlinjetekst, indstilles den tilsvarende celle til topjusteret ved hjælp af valign-attributten.

Hvis du skærer ind i en hjemmeside, der er oprettet på basis af html, vil du se en bestemt lagdelt struktur. Desuden vil dens udseende ligne en lagkage. Hvis du tror det, så har du højst sandsynligt ikke spist i lang tid. Så først stille din sult, og derefter vil vi fortælle dig, hvordan du centrerer et div-lag på dit websted:

Fordele ved layout ved hjælp af et tag

Der er to hovedtyper af hjemmesidestruktur:

• tabelform;
• Blok.

Tabellayout var dominerende selv ved internettets begyndelse. Dens fordele omfatter nøjagtigheden af ​​den specificerede positionering. Men ikke desto mindre har den åbenlyse mangler. De vigtigste er kodens længde og lav indlæsningshastighed.

Når du bruger tabellayout, vil websiden ikke blive vist, før den er fuldstændig indlæst. Mens du bruger div-blokke, vises elementerne med det samme.

Ud over høj indlæsningshastighed giver blokkonstruktion af et websted dig mulighed for at reducere mængden af ​​html-kode flere gange. Herunder gennem brug af CSS klasser.

Tabellayout bør dog bruges til at strukturere visningen af ​​data på siden. Et klassisk eksempel på dets brug er udstilling af borde.

Blokkonstruktion baseret på tags kaldes også lag-for-lag, og selve blokkene kaldes lag. Dette skyldes, at når visse egenskabsværdier bruges, kan de stables oven på hinanden, svarende til lag i Photoshop.

Positioneringshjælpemidler

I bloklayout er det bedre at placere lag ved hjælp af cascading style sheets. Den vigtigste CSS-egenskab, der er ansvarlig for layout, er float.
Ejendomssyntaks:
flyde: venstre | højre | ingen | arve
Hvor:

• venstre – juster elementet til venstre kant af skærmen. Strømningen omkring de resterende elementer sker til højre;
• højre – justering til højre, flow omkring andre elementer – til venstre;
• ingen – indpakning er ikke tilladt;
• arv – arver værdien af ​​det overordnede element.

Lad os se på et letvægtseksempel på positionering af div'er ved hjælp af denne egenskab:

#venstre ( width: 200px; højde: 100px; float: venstre; baggrund: rgb(255,51,102); ) #right ( width: 200px; højde: 100px; float: højre; baggrund: rgb(0,255,153); ) Venstre blok Højre blok

Nu vil vi prøve at bruge den samme egenskab til at placere den tredje div i midten af ​​siden. Men float har desværre ikke en centerværdi. Og når du giver en ny blok en justeringsværdi til højre eller venstre, flyttes den i den angivne retning. Derfor er der kun tilbage at sætte flydende: venstre til alle tre blokke:

Men dette er heller ikke den bedste mulighed. Når vinduet er reduceret i størrelse, er alle lag linet op i én række lodret, og når størrelsen øges, klæber de til venstre kant af vinduet. Så vi har brug for en bedre måde at centrere div.

Centrerende lag

I det næste eksempel vil vi bruge et beholderlag, hvori vi placerer de resterende elementer. Dette løser problemet med blokke, der bevæger sig i forhold til hinanden, når vinduesstørrelsen ændres. Centrering af beholderen i midten sker ved at sætte marginegenskaberne til nul for marginerne fra den øverste kant og auto på siderne (margin: 0 auto ):

#container ( width: 600px; margin: 0 auto; ) #left ( width: 200px; højde: 100px; float: venstre; baggrund: rgb(255,51,102); ) #right ( width: 200px; højde: 100px; : venstre; baggrund: rgb(0,255,153 #center (bredde: 200px; højde: 100px; float: venstre; baggrund: rgb(255,0,0); ) Venstre blok Højre blok);

Det samme eksempel viser, hvordan du kan centrere en div vandret. Og hvis du redigerer ovenstående kode lidt, kan du opnå lodret justering af blokkene. For at gøre dette skal du bare ændre længden af ​​beholderlaget (reducere det). Det vil sige, efter redigering skulle dens css-klasse se sådan ud:

Efter ændringen vil alle blokke stille sig strengt på række i midten. Og deres position ændres ikke uanset browservinduets størrelse. Sådan ser lodret centrering af en div ud:

I det følgende eksempel brugte vi en række nye css-egenskaber til at centrere lag inde i en container:

#container (bredde: 450px; højde:150px; margin:0 auto; baggrundsfarve:#66CCFF; ) #venstre (bredde: 100px; højde: 100px; baggrund: rgb(255,51,102); display: inline-blok; vertikal-align: middle; margin-left: 35px ) #right ( width: 100px; højde: 100px; baggrund: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-venstre: 35px;) #center ( width: 100px; højde: 100px; baggrund: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-venstre: 35px; )

En kort beskrivelse af css-egenskaberne og deres værdier, som vi brugte i dette eksempel til at centrere en div i en div:

• display: inline-blok – justerer et blokelement i en linje og sikrer, at det ombrydes omkring et andet element;
• vertikal-align: middle – justerer elementet i midten i forhold til det overordnede;
• margin-venstre – indstiller venstre margen.

Sådan laver du et link fra et lag

Hvor mærkeligt det end lyder, er det muligt. Nogle gange kan der være behov for en div-blok som et link, når man skal udlægge forskellige typer menuer. Lad os se på et praktisk eksempel på implementering af et linklag:

#layer1( width: 500px; height: 100px; background: rgb(51.255.204); border:groove; ) a (display: block; text-align: center; height: 100%; color: rgb(255,0,51) ; ) Link til vores hjemmeside

I dette eksempel, ved at bruge linjevisningen: blok, sætter vi linket til værdien af ​​et blokelement. Og så hele højden af ​​div-blokken bliver et led, indstilles højden : 100%.

Skjuler og viser blokelementer

Blokelementer giver flere muligheder for at udvide funktionaliteten af ​​grænsefladen end det forældede tabellayout. Det sker ofte, at hjemmesidens design er unikt og genkendeligt. Men for sådan en eksklusiv skal du betale med mangel på ledig plads.

Dette gælder især for hovedsiden, hvor omkostningerne ved annoncering er de højeste. Derfor opstår problemet med, hvor man skal "skubbe" et andet reklamebanner. Og her kan du ikke slippe afsted med at justere div'en til midten af ​​siden!

En mere rationel løsning er at gøre en blok skjult. Her er et simpelt eksempel på en sådan implementering:

#layer1( display:blok; bredde: 500px; højde: 100px; baggrund: rgb(51.255.204); border:groove; ) function show() ( if(layer1=="ingen") ( layer1="blok"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Dette er den magiske knap. Hvis du klikker på den, skjules eller vises skjuleblokken.

I dette eksempel ændres placeringen af ​​div-blokkene ikke på nogen måde. Dette bruger en simpel JavaScript-funktion, der ændrer værdien af ​​css-visningsegenskaben, efter at der er klikket på knappen (onclick-hændelse).

Vis syntaks:
display: blok | inline | inline-blok | inline-tabel | liste-punkt | ingen | indkørt | bord | tabel-billedtekst | tabel-celle | tabel-kolonne-gruppe | tabel-kolonne | table-footer-gruppe | tabel-header-gruppe | tabel-række | tabel-række-gruppe

Som du kan se, kan denne ejendom antage mange værdier. Derfor er det meget nyttigt og kan bruges til at placere elementer. I et af de foregående eksempler brugte vi en af ​​dens værdier (inline-blok) til at centrere en div i en div.

Vi brugte to værdier for displayegenskaben til at skjule og vise laget.