Lodret opretning i div. Bonus: betingede kommentarer

Alle, der beskæftiger sig med layout, bliver før eller siden konfronteret med behovet for at justere elementer lodret... og de ved, hvilke vanskeligheder der kan opstå, når et element justeres til midten. I CSS er der en egenskab "vertical-align" med mange værdier, som logisk set burde udføre vertikal justering. I praksis fungerer det dog slet ikke som forventet.

Der er flere teknikker til at løse dette problem. Nedenfor vil vi se nærmere på hver af dem.

1. Justering ved hjælp af en tabel

I dette tilfælde erstatter vi den ydre blok med en enkeltcelletabel. Justeringen vil blive anvendt på indholdet af cellen, det vil sige den indre blok.

HTML

CSS

Ydre ( bredde : 200 px ; højde : 200 px ; tekstjustering : center ; vertikal justering : midt ; baggrundsfarve : #ffc ; )

Den største ulempe ved denne løsning, set fra et semantisk synspunkt, er brugen af bordet til andre formål end det tilsigtede formål. Den anden ulempe er, at oprettelse af en tabel kræver tilføjelse af et andet element omkring den ydre blok.

Den første ulempe kan delvist undgås ved at erstatte tabeltags med divs og indstille tabelvisningstilstanden i CSS.

HTML

CSS

Outer-wrapper ( display : table ; ) .outer ( display : table-cell ; )

2. Justering ved hjælp af indrykninger

Forudsat at vi kender højderne af de indre og ydre blokke, kan justeringen indstilles ved hjælp af de lodrette indrykninger af den indre blok ved hjælp af formlen: (H ydre – H indre) / 2.

CSS

Ydre (højde: 200px;) .indre (højde: 100px; margin: 50px 0;)

Ulempen ved løsningen er den obligatoriske viden om højden af begge blokke.

3. Justering ved hjælp af line-højde

Hvis den indre blok ikke fylder mere end én tekstlinje, kan du bruge egenskaben line-height og sætte den lig med højden af den ydre blok. Da indholdet af den indre blok ikke skal ombrydes til den anden linje, er det tilrådeligt også at tilføje det hvide mellemrum: nowrap og overflow: skjulte regler.

CSS

Ydre (højde: 200px; linjehøjde: 200px;) .indre (hvid-mellemrum: nurap; overløb: skjult;)

Denne metode kan også bruges til at justere tekst med flere linjer. For at gøre dette skal den indre blok tilsidesætte linjehøjdeværdien og også tilføje displayet: inline-blok og vertikal-align: midterste regler.

CSS

Ydre (højde: 200px; linjehøjde: 200px;) .indre (linjehøjde: normal; display: inline-blok; vertikal-justering: midt;)

Ulempen ved denne metode er, at højden af den udvendige blok skal kendes.

4. Justering ved hjælp af "strækning"

Denne metode kan bruges, når højden af den indre blok er kendt af os, men den ydre er ikke.

For at anvende denne metode har vi brug for:

Indstil den ydre blok til relativ positionering: relativ, og den indre blok til absolut position: absolut;
Tilføj flere regler øverst: 0 og nederst: 0 til den indre blok, som et resultat af hvilken den vil strække sig til hele højden af den ydre blok;
Indstil den lodrette polstring af den interne blok til auto.

CSS

Ydre (position: relativ;). indre (højde: 100px; position: absolut; top: 0; bund: 0; margin: auto 0;)

5. Justering med negativ margin-top

I lighed med den foregående bruges denne metode, når højden af den udvendige blok er ukendt, men højden af den indre blok er kendt.

Du skal indstille den eksterne blok til relativ positionering og den interne blok til absolut positionering. Flyt derefter den indre blok ned med halvdelen af højden af den ydre bloktop: 50% og hæv den med halvdelen af sin egen højde margin-top: -H _indre / 2 .

CSS

Ydre ( position : relativ ; ) .indre ( højde : 100px ; position : absolut ; top : 50 % ; margin-top : -50px ; )

Ulempen ved denne metode er, at højden af indendørsenheden skal kendes.

6. Justering ved hjælp af transformation

Metoden kan bruges, når højden af indendørsenheden er ukendt. Du skal flytte den indre blok ned med halvdelen af højden af den ydre bloktop: 50% , så brug transformationsegenskaben og flytte den op igen ved hjælp af translateY(-50%)-funktionen.

CSS

Ydre ( position : relativ ; ) .indre ( position : absolut ; top : 50% ; transform : translateY (-50% ); )

7. Justering med et pseudo-element

Dette er den mest universelle metode, der kan bruges, når højden af begge blokke er ukendte.

Essensen af metoden er at tilføje en inline-blok med en højde på 100% inde i den ydre blok og tildele den lodret justering. Således vil højden af den tilføjede blok være lig med højden af den ydre blok. Den indendørs blok vil blive justeret lodret i forhold til den tilføjede, og derfor den eksterne blok.

For ikke at krænke semantikken, er det tilrådeligt at tilføje en inline blok ved hjælp af før eller efter pseudo-elementer.

CSS

Ydre :before ( display : inline-blok ; højde : 100% ; vertikal-align : middle ; content : "" ; ) .indre ( display : inline-blok ; vertikal-align : middle ; )

Ulempen ved denne metode er, at den ikke kan bruges med absolut positionering af indendørsenheden.

8. Justering med Flexbox

Den mest moderne metode til vertikal justering er brugen af Flexible Box Layout (eller Flexbox). Det giver dig mulighed for fleksibelt at kontrollere placeringen af elementer på siden, og arrangere dem næsten hvor som helst. Centerjustering for Flexbox er en meget enkel opgave.

Juster tekst lodret i CSS- et meget vanskeligt arbejde. Jeg har set nok mennesker kæmpe med dette, til at jeg bliver ved med at finde "kritiske" fejl, når det kommer til faktisk responsivt design.

Men frygt ikke: Hvis du allerede kæmper med CSS vertikal justering, er du kommet til det rigtige sted.

Lad os tale om CSS vertikal align egenskaben

Da jeg først begyndte at arbejde med webudvikling, kæmpede jeg lidt med denne ejendom. Jeg troede, det skulle fungere som en klassisk ejendom" tekstjustering" Åh, hvis bare alt var så enkelt...

vertikal-align CSS-egenskab fungerer godt med borde, men ikke med divs eller andre elementer. Når du bruger det på en div, justerer det elementet i forhold til andre div'er, men ikke dets indhold. I dette tilfælde fungerer egenskaben kun med display: inline-blok; .

Se eksempel

Vi ønsker at centrere indholdet, ikke selve div!

Du har to muligheder. Hvis du kun har div-elementer med tekst, så kan du bruge egenskaben line-height. Det betyder, at du skal kende højden på elementet, men du kan ikke indstille det. På denne måde vil din tekst altid være i centrum.

Sandheden om denne tilgang CSS lodret justering der er en ulempe. Hvis teksten er flere linjer, så vil linjehøjden blive ganget med antallet af linjer. Mest sandsynligt vil du i dette tilfælde ende med en frygtelig oplagt side.

Tag et kig på dette eksempel

Hvis det indhold, du vil centrere, består af mere end én linje, så er det bedre at bruge tabel-divs. Du kan også bruge tabeller, men det er ikke semantisk korrekt. Hvis du har brug for pauser til responsive formål, er det bedre at bruge div-elementer.

For at dette skal virke, skal der være en overordnet beholder med display: table og inde i den det ønskede antal kolonner, som du vil centrere ved hjælp af display: table-cell og vertical-align: middle .

Se eksempel

Hvorfor fungerer dette med tabelmarkering, men ikke med div-elementer? Fordi rækkerne i tabellen har samme højde. Når en tabelcelles indhold ikke bruger al den tilgængelige højdeplads, tilføjer browseren automatisk lodret udfyldning for at centrere indholdet.

stilling ejendom

Lad os starte med det grundlæggende i CSS div vertikal justering:

position: statisk er standard. Elementet gengives i henhold til HTML-rækkefølge;
position: absolut - bruges til at bestemme den nøjagtige position af et element. Denne position er altid relateret til det nærmeste relativt placerede overordnede element (ikke statisk). Hvis du ikke bestemmer den nøjagtige position af et element, vil du miste kontrollen over det. Det vises tilfældigt og ignorerer dokumentets flow fuldstændigt. Som standard vises elementet i øverste venstre hjørne;
position: relativ - bruges til at placere et element i forhold til dets normale position (statisk). Denne værdi bevarer dokumentflowrækkefølgen;
position: fixed - bruges til at placere elementet i forhold til browservinduet, så det altid er synligt i viewporten.

Bemærk: nogle egenskaber ( top og z-indeks) virker kun, hvis elementet er indstillet til position (ikke statisk).

Lad os komme i gang!

Vil du implementere CSS lodret centerjustering? Opret først et element med relativ position og dimensioner. For eksempel: 100 % i bredde og højde.

Det andet trin kan variere afhængigt af målbrowseren, men du kan bruge en af to muligheder:

Gammel ejendom: skal kende den nøjagtige størrelse af vinduet for at fjerne halvdelen af bredden og halvdelen af højden. Se eksempel;
Ny CSS3 ejendom: Du kan tilføje en transformeringsegenskab med en oversættelsesværdi på 50 %, og blokken vil altid være i midten. Se eksempel.

Grundlæggende, hvis du ønsker at centrere indhold, brug aldrig top: 40% eller venstre: 300px. Dette fungerer fint på testskærme, men det er ikke centreret.

Husk position: fast ? Du kan gøre det samme med det som med en absolut position, men du behøver ikke en relativ position for det overordnede element - det vil altid være placeret i forhold til browservinduet.

Har du hørt om flexbox-specifikationen?

Du kan bruge flexbox. Dette er meget bedre end nogen anden mulighed centrere tekstjustering CSS lodret. Med flexbox er håndtering af elementer som en barneleg. Problemet er, at nogle browsere skal kasseres, såsom IE9 og nedenstående versioner. Her er et eksempel på, hvordan man centrerer en blok lodret:

Se eksempel

Ved at bruge et flexbox-layout kan du centrere flere blokke.

Hvis du anvender det, du lærer fra disse eksempler, kan du mestre CSS lodret blokjustering så hurtigt som muligt.

Links og videre læsning

At lære CSS-markering

FlexBox Froggy

Flexbox sandkasse

Oversættelse af artiklen " CSS Vertical Align for Alle (Dummies inkluderet)” blev udarbejdet af det venlige projekthold.

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 at løse dette problem er især vanskeligt for nybegyndere. 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

/* 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

/* 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 0 -25%; kant: 1px ensfarvet sort; ) /* ende №3*/

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

/* 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 mulighed med egenskaber, der ikke så ofte findes i webstedslayout. Men ikke desto mindre er de i sjældne tilfælde meget nyttige.

En designer har nogle gange et spørgsmål: hvordan man centrerer elementer lodret? Og det giver visse problemer. Der er dog flere metoder til at centrere elementer lodret, og hver af disse metoder er ret enkel. Denne artikel beskriver nogle af disse metoder.

For at se hver metode i aktion skal du klikke på demoknappen eller på billedet.

Lad os diskutere nogle af de problemer, der forhindrer vertikal centrering.

Lodret-justering

Vandret centrering af et element er ret let at implementere (ved hjælp af CSS). Et inline-element kan centreres vandret ved at give dets overordnede beholder en egenskab for tekstjustering af center . Når et element er et blokelement, for at centrere det, skal du blot indstille bredden (bredden) og indstille værdierne for højre (margin-højre) og venstre (margin-venstre) marginer til auto .

Med hensyn til tekst: mange mennesker er begyndt at bruge egenskaben vertikal-align til centrering. Det er logisk, og mit første valg ville være det samme. For at centrere et element i en tabel kan du bruge valign-attributten.

Valign-attributten virker dog kun, når den anvendes på en celle (f.eks. ). CSS-egenskaben vertikal-align kan anvendes på en celle og nogle inline-elementer.

Teksten er centreret i forhold til linjehøjde (linjeafstand).
I forhold til tabellen, uden at gå i detaljer, sker centrering i forhold til rækkens højde.

Desværre kan egenskaben vertical-align ikke anvendes på blokniveauelementer, såsom et afsnit (p) inde i et div-tag.

Der er dog andre metoder til lodret centrering af elementer, og du kan stadig bruge egenskaben vertikal-align, hvor det er nødvendigt. Hvilken metode du skal bruge afhænger af, hvad du vil centrere.

Linjeafstand eller Linjehøjde

Denne metode bør kun bruges, når du skal centrere en tekstlinje. For at gøre dette skal du indstille linjehøjden (linjeafstanden) for det element, der indeholder tekst, til større end skriftstørrelsen.

Som standard er der lige stor plads over og under teksten, så teksten er centreret lodret.

I dette tilfælde er det ikke nødvendigt at angive højden af det overordnede element.

Her er teksten

#child (linjehøjde: 200px;)

Denne metode virker i alle browsere, men glem ikke, at den skal bruges til en tekstlinje. Hvis din tekst strækker sig over mere end én linje, skal du bruge en anden metode. Værdien af line-height-egenskaben kan være hvad som helst, men ikke mindre end skrifttypehøjden. I praksis fungerer denne metode fremragende til at centrere en vandret menu.

CSS-metode ved hjælp af tabelegenskaber

Som jeg allerede har skrevet, kan indholdet af en celle centreres ved hjælp af CSS vertical-align egenskaben. Det overordnede element skal repræsenteres som en tabel, det underordnede element skal være udpeget som en celle, og egenskaben vertikal-align skal anvendes på det med værdien midt . På denne måde vil alt indhold i det underordnede element blive centreret lodret. CSS-koden er angivet nedenfor.

Indhold

#parent ( display: table;) #child ( display: table-cell; vertical-align: middle; )

Desværre virker denne metode ikke i ældre versioner af IE-browseren. Hvis du har brug for browserunderstøttelse til IE6 og derunder, skal du tilføje en visning: inline-blok-erklæring til det underordnede element.

#child (display: inline-blok;)

Absolut positionering og negativ margin

Denne metode er designet til elementer på blokniveau og fungerer i alle browsere. Du skal indstille højden på det element, der skal centreres.

Nedenfor er koden, hvor det underordnede element er centreret ved hjælp af denne metode.

Indhold

#forælder (position: relativ;) #barn (position: absolut; top: 50%; venstre: 50%; højde: 30%; bredde: 50%; margin: -15% 0 0 -25%; )

Først skal du placere det overordnede og underordnede element. Vi sætter derefter det underordnede elements offset til 50% i forhold til den øverste og venstre side af det overordnede element, hvorved det underordnede element centreres i forhold til det overordnede element. Vores manipulationer vil dog centrere det øverste højre hjørne af det underordnede element i midten af det overordnede element, hvilket naturligvis ikke passer os.

Vores opgave: at flytte det underordnede element op og til venstre i forhold til det overordnede element, så det underordnede element visuelt centreres lodret og vandret. Det er derfor, du skal kende højden og bredden af underelementet.

Så vi bør give det underordnede element en negativ top- og venstremargen svarende til henholdsvis halvdelen af underelementets bredde og højde.

I modsætning til de to første metoder er denne metode beregnet til elementer på blokniveau. Metoden fungerer i alle browsere, men indholdet kan overstige højden af det overordnede element og strække sig ud over dets grænser. Denne metode fungerer bedst, når højden og bredden af elementerne er faste.

Absolut placering af et underordnet element

Som i den foregående metode er det overordnede og underordnede elementer placeret henholdsvis relative og absolutte.

I CSS-koden centrerer jeg det underordnede element både lodret og vandret, men du kan kun bruge lodret centrering.

Indhold

#forælder (position: relativ;) #child (position: absolut; top: 0; bund: 0; venstre: 0; højre: 0; bredde: 50%; højde: 30%; margin: auto; )

Ideen med denne metode er, at vi kan placere et underordnet element ved hjælp af top , venstre , højre , nederste egenskabsværdier lig med 0. Da vores underordnede element er mindre end det overordnede element, vil det ikke være i stand til at "klæbe fast ” til det overordnede element.

Marginværdierne for alle fire sider af det underordnede element er nul, hvilket centrerer elementet lodret i forhold til det overordnede element. Desværre har denne metode de samme ulemper som den tidligere metode: det er nødvendigt at rette barnets højde og bredde, manglende støtte til ældre IE-browsere.

Bund- og topmargener er ens

I denne metode tildeler vi eksplicit ens polstring (bund og top) til det overordnede element, som visuelt centrerer det underordnede element lodret.

Indhold

#forælder (polstring: 5% 0; ) #child (polstring: 10% 0; )

Jeg bruger relative størrelser. Hvis blokstørrelserne er faste, bliver du nødt til at lave nogle matematiske beregninger.

For eksempel, hvis det overordnede element har en højde på 400px, og barnet er 100px, skal du indstille den øverste og nederste polstring til 150px.

150 + 150 + 100 = 400

flydende div

Denne metode involverer en tom flydeblok, der styrer den lodrette position af det underordnede element. Den flydende div skal placeres før det underordnede element, se HTML-koden nedenfor.

Indhold

#forælder (højde: 250px;) #floater (flyder: venstre; højde: 50%; bredde: 100%; margin-bund: -50px; ) #barn (fri: begge; højde: 100px;)

Først flytter vi den flydende blok til venstre (eller højre) og giver den en højde på 50 % af dens forælder. På denne måde vil den flydende blok fylde den øverste halvdel af det overordnede element.

Da blokken er flydende, fjernes den fra dokumentets generelle flow, og derfor bør den underordnede blok tildeles egenskaben clear med værdien both . Jeg indstiller værdien til begge , men du kan bruge en værdi, der matcher positioneringsretningen for det flydende element.

I øjeblikket ligger den øverste kant af det underordnede element direkte under den nederste kant af det flydende element. Vi skal hæve barneelementet til halvdelen af højden af det flydende element. For at gøre dette skal du blot sætte den negative bundmargen for den flydende blok til 50 %.

Virker i alle browsere. Ulempen ved denne metode er, at den kræver en tom blok og kræver at kende højden på underelementet.

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 rammer til det ved at bruge " polstring".

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;)

Justering af absolut positionerede blokke

Hvis blokken er sat til " position: absolut", så kan den placeres i forhold til sin nærmeste forælder med "position: relativ". Dette kræver alle egenskaber (" top","højre","bund","venstre") af den indre blok for at tildele den samme værdi, 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 : auto ; baggrund : url(king.png) ; )

Horisontal justering

Justering ved hjælp af "text-align: center"

For at justere tekst i en blok er der en speciel egenskab " tekstjustering". Når indstillet til " centrum"Hver tekstlinje vil blive justeret vandret. For tekst med flere linjer bruges denne løsning ekstremt sjældent; oftere kan denne mulighed 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 af blokke ved hjælp af margen

Blokelementer med en kendt bredde kan nemt justeres vandret ved at sætte dem til "margin-left: auto; margin-right: auto". Normalt bruges forkortelsen: " margin: 0 auto" (en hvilken som helst værdi kan bruges i stedet for nul). Men denne metode er ikke egnet til vertikal 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 linje-højde egenskab

I det tilfælde, hvor der kun er én linje i en blok, kan du opnå dens lodrette justering ved at bruge " linjehøjde" og indstille den til den ønskede højde. For pålidelighed er det værd at indstille også "højde", hvis værdi vil være lig med værdien af "linjehøjde", 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-justering : midt ; baggrund : # FFFAF2 ; farve : # FF9B00 ; tekstjustering : center ; )

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

Ejendom " lodret justere" påvirker også tabelceller. Med værdien sat til "midt", er indholdet inde i cellen justeret til midten. Selvfølgelig betragtes tabellayout som arkaisk i dag, men i undtagelsestilfælde kan du simulere det ved at angive " display: tabel-celle".

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-height : 100px %; min-bredde: 140px; display: blok; margin: 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 " lodret-align: midten". Desuden er alle elementer med " display: inline", der er på samme linje, vil flugte med 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 : 200px ; ) .riki ( display : inline-blok ; højde : 100 % ; lodret 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, jeg ville skrive om CSS-justering. Nu vil centrering af indhold ikke være et problem!