Centrera: Den Nyaste Coolaste Sättet kontra Den Äldsta Coolaste Sättet

0
25

Detta är inte en heltäckande guide till centrering saker. Vi har det!

Detta är bara en liten observation om gamla och nya. En av de svårare saker relaterade till centrering i CSS när du behöver center både vertikalt och horisontellt, och du vet inte bredd eller höjd av vad du centrering. Vertikal centrering är det extra knepigt och en av de två.

Tro det eller ej, det var ett sätt att göra det även i IE 8. Tricket var att dra fördel av display: table, och att bord hade denna andra egenskap, vertical-align: middle;, som kan användas för vertikal centrering.

Säg allt du ville göra var centrum en mening perfekt i mitten av webbläsarens fönster:


<body>
<span>
Centrerad vertikalt och horisontellt.
</span>
</body>

Kan du göra det så här:

html, body {
margin: 0;
höjd: 100%;
}
body {
display: table;
width: 100%;
}
body > – span {
display: table-cell;
vertical-align: middle;
text-align: center;
}

Det kan vara det äldsta tricket i Boken CSS-Centrering. Här det fungerar i internet explorer 8:

Idag har vi mer modern layout metoder. Flexbox! CSS nätet!

Här är åstadkomma samma sak med de mest moderna metoderna som finns tillgängliga:

body {
display: nätet.
höjd: 100vh;
margin: 0;
placera objekt: center center;
}

Vi behöver inte ens röra span det! Detta är så banbrytande, i själva verket, att Microsoft Kant, som stöder CSS nätet, inte har stöd för plats-objekt ännu. Du skulle ha för att använda align-objekt: center; och motivera-innehåll: center; i stället.

Alltid movin’.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!

SHARE
Previous articleVad är SVG bra för?
Next articleHva er SVG godt for?