At centrere elementer lodret ved hjælp af CSS er en opgave, der giver nogle vanskeligheder for udviklere. Der er dog flere metoder til at løse det, som er ret enkle. Denne lektion præsenterer 6 muligheder for lodret centrering af indhold.
Lad os starte med generel beskrivelse opgaver.
Lodret centreringsproblemVandret centrering er meget enkel og nem. Når det centrerede element er inline, bruger vi alignment-egenskaben i forhold til det overordnede element. Når elementet er blok-niveau, indstiller vi dets bredde og automatisk installation venstre og højre marginer.
De fleste mennesker, når de bruger egenskaben tekst-align:, henviser til egenskaben vertical-align for vertikal centrering. Alt ser ret logisk ud. Hvis du har brugt tabelskabeloner, har du sikkert gjort udstrakt brug af valign-attributten, som forstærker troen på, at vertikal-align er den rigtige måde at løse problemet på.
Men valign-attributten virker kun på tabelceller. Og lodret-align-egenskaben ligner den meget. Det påvirker også tabelceller og nogle inline-elementer.
Værdien af lodret-align-egenskaben er i forhold til det overordnede inline-element.
- I en tekstlinje er justeringen i forhold til linjehøjden.
- Tabelcellen bruger justering i forhold til en værdi beregnet af en speciel algoritme (normalt rækkehøjden).
Men desværre virker lodret-align-egenskaben ikke på blokniveau-elementer (for eksempel afsnit inde i et div-element). Denne situation kan få en til at tro, at der ikke er nogen løsning på problemet med vertikal justering.
Men der findes andre metoder til centrering af blokelementer, hvis valg afhænger af, hvad der centreres i forhold til den ydre beholder.
Linjehøjde metodeDenne metode fungerer, når du vil centrere én tekstlinje lodret. Alt du skal gøre er at indstille linjehøjden til at være større end skriftstørrelsen.
Som standard vil det hvide mellemrum blive fordelt jævnt i toppen og bunden af teksten. Og linjen vil blive centreret lodret. Ofte gøres linjehøjden lig med elementhøjden.
HTML:Påkrævet tekst
CSS:#child (linjehøjde: 200px;)
Denne metode virker i alle browsere, selvom den kun kan bruges til én linje. Værdien 200 px i eksemplet blev valgt vilkårligt. Du kan bruge enhver værdi, der er større end tekstens skriftstørrelse.
Centrering af et billede ved hjælp af linjehøjdeHvad hvis indholdet er et billede? Vil ovenstående metode virke? Svaret ligger i endnu en linje med CSS-kode.
HTML:
#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )
Værdien af egenskaben linjehøjde skal være større end billedets højde.
CSS-tabelmetodeDet blev nævnt ovenfor, at lodret-align egenskaben bruges til tabelceller, hvor det fungerer godt. Vi kan vise vores element som en tabelcelle og bruge lodret-align egenskaben på det til at centrere indholdet lodret.
Bemærk: En CSS-tabel er ikke det samme som en HTML-tabel.
HTML:Indhold
CSS:#parent (display: table;) #child ( display: table-cell; vertical-align: middle; )
Vi indstiller tabeloutputtet til det overordnede div-element og udsender det indlejrede div-element som en tabelcelle. Du kan nu bruge egenskaben vertikal-align på den indre beholder. Alt i det vil være centreret lodret.
I modsætning til metoden beskrevet ovenfor, i I dette tilfælde Indholdet kan være dynamisk, da div-elementet vil ændre størrelsen i henhold til dets indhold.
Ulempen ved denne metode er, at den ikke virker i ældre versioner af IE. Du skal bruge egenskaben display: inline-block for den indlejrede container.
Absolut positionering og negative marginerDenne metode virker også i alle browsere. Men det kræver, at elementet, der centreres, får en højde.
Eksempelkoden udfører vandret og lodret centrering på samme tid:
HTML:Indhold
CSS:#forælder (position: relativ;) #barn (position: absolut; top: 50%; venstre: 50%; højde: 30%; bredde: 50%; margin: -15% 0 0 -25%; )
Først indstiller vi elementpositioneringstypen. Dernæst sætter vi det indlejrede div-elements top og venstre egenskaber til 50%, hvilket svarer til midten af det overordnede element. Men midten er det øverste venstre hjørne af det indlejrede element. Derfor skal du løfte den op (halv højden) og flytte den til venstre (halv bredden), og så vil midten falde sammen med midten af det overordnede element. Så det er nødvendigt at kende højden af elementet i dette tilfælde. Derefter sætter vi elementet med negativ top- og venstremargin svarende til henholdsvis halvdelen af højden og bredden.
Denne metode virker ikke i alle browsere.
Absolut positionering og strækningEksempelkoden udfører lodret og vandret centrering.
HTML:Indhold
CSS:#forælder (position: relativ;) #child (position: absolut; top: 0; bund: 0; venstre: 0; højre: 0; bredde: 50%; højde: 30%; margin: auto; )
Ideen bag denne metode er at strække det indlejrede element til alle 4 kanter af det overordnede element ved at sætte egenskaberne for top, bund, højre og venstre til 0.
Indstilling af margener til automatisk generering på alle sider vil indstille ens værdier på alle 4 sider og centrere vores indlejrede div-element på dets overordnede element.
Desværre virker denne metode ikke i IE7 og derunder.
Lige mellemrum over og underI denne metode er ens udfyldning eksplicit sat over og under det overordnede element.
HTML:Indhold
CSS:#forælder (polstring: 5% 0; ) #child (polstring: 10% 0; )
CSS-eksemplet sætter top- og bundpolstring for begge elementer. For et indlejret element vil indstilling af polstringen tjene til at centrere det lodret. Og det overordnede elements polstring vil centrere det indlejrede element i det.
Relative måleenheder bruges til dynamisk at ændre størrelse på elementer. Og for absolutte måleenheder skal du lave beregninger.
For eksempel, hvis det overordnede element har en højde på 400px, og det indlejrede element er 100px, skal der 150px polstring i toppen og bunden.
150 + 150 + 100 = 400
Ved at bruge % kan du overlade beregningerne til browseren.
Denne metode virker overalt. Ulempen er behovet for beregninger.
Bemærk: Denne metode fungerer ved at indstille den ydre polstring af elementet. Du kan også bruge margener i et element. Beslutningen om at bruge marginer eller polstring skal træffes afhængigt af projektets detaljer.
flydende divDenne metode bruger et tomt div-element, der flyder og hjælper med at kontrollere placeringen af vores indlejrede element i dokumentet. Bemærk, at den flydende div er placeret før vores indlejrede element i HTML-koden.
HTML:Indhold
CSS:#forælder (højde: 250px;) #floater (flyder: venstre; højde: 50%; bredde: 100%; margin-bund: -50px; ) #barn (fri: begge; højde: 100px;)
Vi forskyder den tomme div til venstre eller højre og indstiller dens højde til 50 % af dens overordnede element. På denne måde vil det fylde den øverste halvdel af det overordnede element.
Da denne div er flydende, fjernes den fra dokumentets normale flow, og vi skal pakke teksten ud på det indlejrede element. Eksemplet bruger clear: both , men det er ganske nok at bruge samme retning som offset af det flydende tomme div-element.
Den øverste kant af et indlejret div-element er direkte under den nederste kant af et tomt div-element. Vi skal flytte det indlejrede element op med halvdelen af højden af det flydende tomme element. For at løse problemet skal du bruge en negativ margin-bund-egenskabsværdi for et flydende tomt div-element.
Denne metode virker også i alle browsere. Brug af det kræver dog et ekstra tomt div-element og viden om højden af det indlejrede element.
KonklusionAlle beskrevne metoder er nemme at bruge. Vanskeligheden er, at ingen af dem er egnede til alle tilfælde. Du skal analysere projektet og vælge det, der passer bedst til kravene.
At justere tekst lodret i CSS er en ret vanskelig opgave. 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 egenskabenDa jeg først begyndte at arbejde med webudvikling, kæmpede jeg lidt med denne ejendom. Jeg troede, det skulle fungere som den klassiske "tekst-align" egenskab. Åh, hvis bare alt var så enkelt...
Egenskaben vertikal-align CSS fungerer fint med tabeller, men ikke med div'er 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.
Der er dog en ulempe ved denne CSS vertikal justering tilgang. 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 kan fungere skal der være en forældrebeholder med display: bord og inde i det - påkrævet mængde kolonner, 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 ejendomLad 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 sat til position (ikke statisk ).
Lad os komme i gang!Ønsker du at implementere lodret centerjustering af CSS? 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 på eksemplet;
- Ny CSS3-egenskab: du kan tilføje en transform-egenskab med en oversættelsesværdi på 50 %, og blokken vil altid være i centrum. Se eksempel.
Grundlæggende, hvis du vil centrere indhold, skal du aldrig bruge 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 CSS lodret center-tekstjusteringsmulighed. 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 har lært fra disse eksempler, vil du være i stand til at mestre CSS lodret blokjustering på ingen tid.
Links og videre læsningAt lære CSS-markering
FlexBox Froggy
Flexbox sandkasse
Oversættelsen af artiklen "CSS Vertical Align for Everyone (Dummies Included)" blev udarbejdet af det venlige projektteam.
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 visuel kommunikation mellem forskellige elementer, såvel som deres grupperinger.
Lodret centreringEn 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".
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 justeringVed at kombinere attributterne align (horisontal justering) og valign (lodret justering) for tagget
Lad os se på nogle eksempler på tekstjustering i henhold til figuren nedenfor.
TopjusteringFor at angive topjusteringen af celleindhold for et tag
Eksempel 2: Brug af valign
Justering
| Kolonne 1 | Kolonne 2 |
I dette eksempel styres cellekarakteristika ved hjælp af tag-parametre
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 */ tekstjustering: 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 justeringSom standard er celleindhold justeret til deres lodrette centrum, så hvis forskellige højder Kolonner skal justeres til toppen. 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 typografier.
Justering af formularelementerVed 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 | |
| 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.
Meget ofte i layout er det nødvendigt at centrere et element vandret og/eller lodret. Derfor besluttede jeg at lave en artikel med forskellige veje centrering, så alt er lige ved hånden på ét sted.
Horisontal justeringsmargen: autoHorisontal justering ved hjælp af margen bruges, når bredden af det centrerede element er kendt. Virker til blokelementer:
Elem (margen-venstre: auto; margin-højre: auto; bredde: 50%;)
Angivelse af auto for højre og venstre marginer gør dem ens, hvilket centrerer elementet vandret i den overordnede blok.
tekst-align: centerDenne metode er velegnet til at centrere tekst i en blok. tekst-align: center:
Justering med text-align .wrapper ( text-align: center; )
Jeg er midtstillet
position og negativ margin tilbageVelegnet til centrering af blokke med kendt bredde. Vi giver den overordnede blokposition: i forhold til positionen i forhold til den, den centrerede elementposition: absolut , venstre: 50% og en negativ margin-venstre, hvis værdi er lig med halvdelen af elementets bredde:
Justering med position .wrapper (position: relativ; ) .wrapper p (venstre: 50%; margin: 0 0 0 -100px; position: absolut; bredde: 200px; )
Jeg er midtstillet
display: inline-blok + tekst-align: centerMetoden er velegnet til at justere blokke af ukendt bredde, men kræver en indpakningsforælder. For eksempel kan du centrere en vandret menu på denne måde:
Justering med display: inline-blok + tekst-align: center; .navigation ( tekst-align: center; ) .navigation li ( display: inline-blok; )
Lodret justering linje-højdeFor at justere en tekstlinje kan du bruge de samme højde- og linjeafstandsværdier for den overordnede blok. Velegnet til knapper, menupunkter mv.
line-height .wrapper ( højde: 100px; line-height: 100px; )
Jeg er lodret justeret
position og negativ margin opEt element kan justeres lodret ved at give det en fast højde og påføringsposition: absolut og en negativ margin op lig med halvdelen af højden af det element, der justeres. Den overordnede blok skal gives position: relativ:
Indpakning (position: relativ; ) elem (højde: 200px; margin: -100px 0 0; position: absolut; top: 50%; )
På denne måde, ved hjælp af positionering og negative marginer, kan du centrere et element på siden.
display: tabel-celleTil lodret justering anvendes egenskaben display: table-cell på elementet, hvilket tvinger det til at emulere en tabelcelle. Vi indstiller også dens højde og lodret justere: midt . Lad os pakke alt dette ind i en beholder med displayet: table; property. :
Lodret justering visning: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )
Jeg er lodret justeret
Dynamisk justering af et element på en sideVi så på måder at justere elementer på en side ved hjælp af CSS. Lad os nu tage et kig på jQuery-implementeringen.
Lad os forbinde jQuery til siden:
Jeg foreslår, at du skriver en simpel funktion til at centrere et element på siden, lad os kalde det alignCenter() . Selve elementet fungerer som et argument for funktionen:
Funktion alignCenter(elem) ( // kode her)
I funktionens krop beregner og tildeler vi dynamisk sidecentrets koordinater til CSS-egenskaberne til venstre og øverst:
Funktion alignCenter(elem) ( elem.css(( venstre: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. height()) / 2 + "px" // glem ikke at tilføje position: absolut til elementet for at udløse koordinater )) )
I den første linje af funktionen får vi dokumentets bredde og trækker bredden af elementet fra det, delt i halvdelen - dette vil være det vandrette centrum af siden. Den anden linje gør det samme, kun med højden for lodret justering.
Funktionen er klar, det eneste, der er tilbage, er at vedhæfte det til DOM-beredskab og vinduesstørrelseshændelser:
$(function() ( // kald centreringsfunktionen, når DOM'en er klar alignCenter($(elem)); // kald funktionen, når størrelsen på vinduet ændres $(window).resize(function() ( alignCenter($(elem) )); )) // element centreringsfunktion funktion alignCenter(elem) ( elem.css(( // beregner venstre og øverste koordinater venstre: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))
Anvendelse af FlexboxNye CSS3-funktioner, såsom Flexbox, er efterhånden almindelige. Teknologien hjælper med at skabe markup uden brug af flydere, positionering osv. Den kan også bruges til at centrere elementer. Anvend f.eks. Flexbox på det overordnede element.wrapper og centrer indholdet inde i:
Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; højde: 500px; bredde: 500px; ) .wrapper .content ( margin: auto; /* margin: 0 auto; kun vandret */ /* margin: auto 0; kun lodret */ ) Lorem ipsum dolor sit amet
Denne regel centrerer elementet vandret og lodret på samme tid - margen fungerer nu ikke kun for vandret justering, men også til lodret. Og uden kendt bredde/højde.
Relaterede ressourcer Hjælp projektetJeg tror, at mange af jer, der har skullet beskæftige jer med layout, er stødt på behovet for at justere elementer lodret og kender de vanskeligheder, der opstår, når man justerer et element til midten.
Ja, der er en speciel lodret justering-egenskab med flere værdier i CSS til lodret justering. I praksis fungerer det dog slet ikke som forventet. Lad os prøve at finde ud af det.
Lad os sammenligne følgende tilgange. Juster ved hjælp af:
- borde,
- fordybning,
- linjehøjde
- udstrækning,
- negativ margin,
- transformere
- pseudo element
- flexbox.
Der er to div-elementer, hvor det ene er indlejret i det andet. Lad os give dem de tilsvarende klasser - ydre og indre.
Udfordringen er at justere det indre element med midten af det ydre element.
Lad os først overveje sagen, når dimensionerne af de eksterne og interne blokke er kendte. Lad os tilføje regelvisningen: inline-blok til det indre element, og tekst-align: center og vertikal-align: midten til det ydre element.
Husk, at justering kun gælder for elementer, der har en inline- eller inline-blok-visningstilstand.
Lad os indstille størrelserne på blokkene samt baggrundsfarver, så vi kan se deres grænser.
Ydre ( width: 200px; højde: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner (display: inline-block; width: 100px; højde: 100px; baggrundsfarve : #fcc; )
Efter at have anvendt stilarterne vil vi se det indendørsenhed justeret vandret, men ikke lodret:
http://jsfiddle.net/c1bgfffq/
Hvorfor skete det? Pointen er, at egenskaben vertikal-align påvirker justeringen af selve elementet, ikke dets indhold (undtagen når det anvendes på tabelceller). Derfor gav anvendelsen af denne egenskab på det ydre element ikke noget. Desuden vil anvendelse af denne egenskab på et indre element heller ikke gøre noget, da inline-blokke er justeret lodret i forhold til tilstødende blokke, og i vores tilfælde har vi en inline-blok.
Der er flere teknikker til at løse dette problem. Nedenfor vil vi se nærmere på hver af dem.
Justering ved hjælp af en tabel Den første løsning, der kommer til at tænke på, er at erstatte den ydre blok med en tabel med én celle. I dette tilfælde vil justeringen blive anvendt på indholdet af cellen, det vil sige på den indre blok.
http://jsfiddle.net/c1bgfffq/1/
Indlysende minus denne beslutning– set fra et semantisk synspunkt er det forkert at bruge tabeller til alignment. Den anden ulempe er, at for at oprette en tabel skal du tilføje et andet element omkring ekstern enhed.
Det første minus kan delvist fjernes ved at erstatte tabel- og td-tags med div og indstille tabelvisningstilstanden i CSS.
.outer-wrapper ( display: tabel; ) .outer ( display: tabel-celle; )
Den ydre blok vil dog stadig forblive et bord med alle de deraf følgende konsekvenser.
Ydre ( højde: 200px; ) .indre ( højde: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Ulempen ved løsningen er, at den kun er anvendelig i et begrænset antal tilfælde, når højden af begge blokke er kendt.
Justering med linjehøjde Hvis du ved, at den indre blok ikke skal fylde mere end én tekstlinje, så kan du bruge egenskaben linjehøjde 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, anbefales det også at tilføje det hvide mellemrum: nowrap og overflow: skjulte regler.Ydre (højde: 200px; linjehøjde: 200px; ) .indre (hvid-mellemrum: nowrap; overløb: skjult;)
http://jsfiddle.net/c1bgfffq/12/
Også denne teknik kan også bruges til at justere flerlinjetekst, hvis du tilsidesætter linjehøjdeværdien for den indre blok og også tilføjer displayet: inline-blok og vertikal-align: midterste regler.
Ydre (højde: 200px; linjehøjde: 200px; ) .indre (linjehøjde: normal; display: inline-blok; vertikal-justering: midt; )
http://jsfiddle.net/c1bgfffq/15/
Minus denne metode er, at højden på den udvendige blok skal kendes.
Opretning ved hjælp af "strækning" Denne metode kan bruges, når højden af den ydre blok er ukendt, men højden af den inderste er kendt.For at gøre dette skal du bruge:
http://jsfiddle.net/c1bgfffq/4/
Ideen bag denne teknik er, at indstilling af en højde for en strakt og absolut positioneret blok får browseren til at beregne den lodrette polstring i et lige forhold, hvis den er indstillet til auto.
Justering med negativ margin-top Denne metode er blevet almindeligt kendt og bruges meget ofte. Ligesom den forrige bruges den, når højden af den ydre blok er ukendt, men højden af den inderste er kendt.Du skal indstille den eksterne blok til relativ positionering og den interne blok til absolut positionering. Derefter skal du flytte den indre blok ned med halvdelen af højden af den ydre bloktop: 50% og hæve den op med halvdelen af sin egen højde margin-top: -H indre / 2.
Ydre (position: relativ; ) .indre (højde: 100px; position: absolut; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Ulempen ved denne metode er, at højden af indendørsenheden skal kendes.
Justering ved hjælp af transformation Denne metode ligner den forrige, men den kan bruges, når højden af den indre blok er ukendt. I dette tilfælde kan du i stedet for at indstille en negativ pixelpolstring bruge transformegenskaben og flytte den indre blok op ved hjælp af translateY-funktionen og en værdi på -50 % .Ydre ( position: relativ; ) .indre ( position: absolut; top: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Hvorfor var det umuligt at sætte værdien i procent i den tidligere metode? Fordi procentværdier margin egenskaber beregnes i forhold til det overordnede element, en værdi på 50% ville være halvdelen af højden af den ydre boks, og vi var nødt til at hæve den indre boks til halvdelen af sin egen højde. Forvandlingsejendommen er perfekt til dette.
Ulempen ved denne metode er, at den ikke kan bruges, hvis indendørsenheden har absolut positionering.
Opretning med Flexbox moderne måde lodret justering er at bruge Flexible Box Layout (populært kendt som Flexbox). Dette modul 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.Den ydre blok skal indstilles til at vise: flex og den indre blok til margin: auto . Og det er det hele! Smukt, ikke sandt?
Ydre (skærm: flex; bredde: 200px; højde: 200px; ) .indre (bredde: 100px; margin: auto;)
http://jsfiddle.net/c1bgfffq/14/
Ulempen ved denne metode er, at Flexbox kun understøttes af moderne browsere.
Hvilken metode skal jeg vælge? Du skal tage udgangspunkt i problemformuleringen:- For at justere tekst lodret er det bedre at bruge lodrette indrykninger eller egenskaben linjehøjde.
- For absolut placerede elementer med en kendt højde (for eksempel ikoner) er metoden med en negativ margin-top-egenskab ideel.
- For mere komplekse sager Når højden af blokken er ukendt, skal du bruge et pseudo-element eller transform-egenskaben.
- Nå, hvis du er så heldig, at du ikke behøver at understøtte ældre versioner af IE-browseren, så er det selvfølgelig bedre at bruge Flexbox.
Indlæser...