6 CSS-tricks til at justere indholdet lodret
Lad os tale om lodret justering i CSS, eller for at være mere præcis, hvordan det ikke er muligt. CSS har endnu ikke givet en officiel måde at centrere indhold lodret i sin container. Det er et problem, der sandsynligvis har frustrerede webudviklere overalt. Men ikke for at frygte, i dette indlæg vil vi lede nogle tricks til dig, som kan hjælpe dig efterligne effekten.
Disse tricks kan dog have begrænsninger, og du skal muligvis brug mere end et trick for at fuldføre illusionen. Hvis du ved noget andet trick, så lad os vide i kommentarerne.
1. Brug absolut positionering
Det første trick vi skal se her bruger Vi vil først indstille beholderelementets position til relativ, så sætter vi barnets elementposition til For at justere det lodret skal du flytte barnelementets position fra toppen, halvdelen af beholderens højde og trække den op med halvdelen af barnets elementbredde. Her er output: Dette trick er perfekt, når der kun er et enkelt barnelement, ellers CSS3 Transform har gjort det nemt at lægge indhold i centrum. CSS3 Transform, i modsætning til Forudsat at vi har den samme HTML-struktur som den foregående metode - en forælder, et barnelement - Husk på, at CSS3 Transforms ikke fungerer i Internet Explorer 8 og nedenfor. Du vil måske bruge en af de andre metoder her som en tilbagesendelse. Vi kan også bruge Dette trick er velegnet til, når du ikke sætter beholderen i en fast bredde, skal du bare indstille bredden til Hvis du kun har en enkelt tekstlinje i en container, kan du justere teksten lodret ved hjælp af Husk at dette trick kun virker med en enkelt tekstlinje. Hvis indholdet bryder ind i to eller flere linjer, vil mellemrummet mellem hver linje være som vi specificerede i Personligt, ved hjælp af CSS Table er mit foretrukne trick til at anvende lodret justering. Det virker i gamle browsere som Internet Explorer 8. Denne metode gøres ved at indstille beholderelementets display til Den sidste metode til lodret centrering er ved at bruge Flexbox. Flexbox er et nyt modul i CSS3. Det giver en mere ligetil metode til at tilpasse indhold. For at centrere indholdet lodret i flex box, skal du blot tilføje Husk, at Flexbox nogle browsere kun understøtter delfunktioner i Flexbox-modulet, såsom Internet Explorer 10, Safari, 6 og Chrome 27 og under. Derfor ligner tricket med CSS3 Transform, at effekten falder pænt i denne browser.position ejendom. Du har to absolut. Dette giver os mulighed for frit at placere det over beholderen. absolut position vil påvirke det andet element i samme beholder.2. Brug CSS3 Transform
position ejendom, vil ikke påvirke placeringen af andre elementer inden for samme beholder.50% fra toppen og ved hjælp af CSS transformation giver en oversættelse af -50%. Og der har du det.3. Brug polstring
polstring at skabe en illusion af lodret justering. For at gøre det skal du blot indstille top og bundpolstring lige som følger:auto.4. Brug linjehøjde
linjehøjde ejendom. Indstil linjehøjde værdi for omtrent det samme som beholderens højde, og du vil se følgende output.linjehøjde, giver os for meget whitespace.5. Brug CSS-tabel
bord, mens barnelementet skal vises som tabel-celle brug derefter vertical-align Egenskab til at centrere tekst lodret.6. Brug Flexbox
align-items: center; som følger, og det er det.
