Sentrering: Den Nyeste Kuleste Måten vs. Den Eldste Kuleste Måte

0
24

Dette er ikke en omfattende guide til å sentrere ting. Vi har det!

Dette er bare en liten observasjon om gamle og nye. En av de vanskeligere ting relatert til sentrering i CSS er når du trenger å center, både vertikalt og horisontalt, og du ikke vet bredde eller høyde på hva du er sentrering. Vertikal sentrering blir det ekstra vanskelig for de to.

Tro det eller ei, det var en måte å gjøre det selv i internet explorer 8. Trikset var å dra nytte av display: table, og at tabeller hadde denne andre eiendel, vertical-align: middle;, som kan brukes for vertikal sentrering.

Si alt du ønsket å gjøre var å center en setning helt i midten av den nettleser-vinduet:


<body>
<span>
Sentrert vertikalt og horisontalt.
</span>
</body>

Du kan gjøre det slik som dette:

html, body {
margin: 0;
høyde: 100%;
}
body {
skjerm: tabellen;
bredde: 100%;
}
body > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}

Det kan være det eldste trikset i Boken av CSS Sentrering. Her er det jobber i IE 8:

I dag har vi mer moderne metoder. Flexbox! CSS-grid!

Her er en oppnå det samme med de mest moderne metoder tilgjengelig:

body {
visning: rutenett;
høyde: 100vh;
margin: 0;
sted-elementer: center center;
}

Vi trenger ikke engang å berøre span det! Dette er så banebrytende, faktisk, at Microsoft Kanten, som støtter CSS rutenett, ikke støtter sted-elementer ennå. Du ville ha til å bruke rett-elementer: center; og rettferdiggjøre-innhold: center; i stedet.

Alltid movin’.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!

SHARE
Previous articleHva er SVG godt for?
Next articleWas ist SVG?