Kuidas tsentreerida CSS-iga - joondage div, tekst ja palju muud
Asjade tsentreerimine on CSS-i üks raskemaid aspekte.
Meetoditest endist pole tavaliselt raske aru saada. Selle põhjuseks on pigem asjaolu, et asjade tsentreerimiseks on nii palju võimalusi.
Kasutatav meetod võib varieeruda sõltuvalt HTML-elemendist, mida proovite tsentreerida, või sellest, kas tsentreerite seda horisontaalselt või vertikaalselt.
Selles õpetuses käsitleme, kuidas erinevaid elemente tsentreerida nii horisontaalselt, vertikaalselt kui ka vertikaalselt ja horisontaalselt.
Kuidas horisontaalselt tsentreerida
Elementide horisontaalne tsentreerimine on üldiselt lihtsam kui nende vertikaalne tsentreerimine. Siin on mõned levinumad elemendid, mida võiksite horisontaalselt koondada, ja erinevad viisid selle tegemiseks.
Kuidas teksti tsentreerida atribuudiga CSS Text-Align Center
Teksti või linkide horisontaalseks tsentreerimiseks kasutage lihtsalt text-align
atribuuti väärtusega center
:
Hello, (centered) World!
p { text-align: center; }


Kuidas Div-i tsentreerida CSS Margin Auto abil
Lühitasandi margin
atribuudi väärtusega kasutage plokitaseme 0 auto
elementide tsentreerimiseks div
horisontaalselt:
.child { ... margin: 0 auto; }

Kuidas Div-d Flexboxiga horisontaalselt tsentreerida
Flexbox on moodsaim viis lehel olevate asjade koondamiseks ja muudab tundlike paigutuste kujundamise palju lihtsamaks kui varem. Mõnes päritud brauseris, näiteks Internet Exploreris, ei toetata seda täielikult.
Elemendi Flexboxiga horisontaalselt tsentreerimiseks rakendage lihtsalt display: flex
ja elementi vanemelement justify-content: center
:
.container { ... display: flex; justify-content: center; }

Kuidas vertikaalselt tsentreerida
Elementide vertikaalne tsentreerimine ilma kaasaegsete meetoditeta, nagu Flexbox, võib olla tõeline töö. Siin käsitleme mõningaid vanemaid meetodeid kõigepealt asjade vertikaalseks tsentreerimiseks, seejärel näitame teile, kuidas seda Flexboxiga teha.
Kuidas keskendada div vertikaalselt CSS-i absoluutse positsioneerimise ja negatiivsete veeristega
Pikka aega oli see tee vertikaalseks tsentreerimiseks. Selle meetodi jaoks peate teadma selle elemendi kõrgust, mille soovite tsentreerida.
Kõigepealt määrake display
vanema elemendi atribuudiks relative
.
Siis laps element, määrata display
vara absolute
ja top
et 50%
:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Kuid see keskendab lapse elemendi ülemise serva lihtsalt vertikaalselt.
Alamelemendi tõeliseks tsentreerimiseks määrake margin-top
atribuudiks -(half the child element's height)
:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Kuidas Div-i vertikaalselt teisendada ja teisendada
Kui te ei tea elemendi kõrgust, mida soovite tsentreerida (või isegi kui teate), on see meetod suurepärane nipp.
See meetod sarnaneb ülaltoodud negatiivsete marginaalide meetodiga. Määrake vanemelemendi display
atribuudiks väärtus relative
.
Lapseelemendi jaoks määrake display
atribuudiks väärtus absolute
ja top
väärtuseks 50%
. Selle asemel, et kasutada lapse elemendi tõeliseks keskendamiseks negatiivset veerist, kasutage lihtsalt järgmist transform: translate(0, -50%)
:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Pange tähele, et see translate(0, -50%)
on translateX(0)
ja translateY(-50%)
. Võite kirjutada transform: translateY(-50%)
ka lapse elemendi vertikaalseks tsentreerimiseks.
Kuidas Div-i vertikaalselt keskendada Flexboxiga
Nagu asjade horisontaalne tsentreerimine, on ka Flexboxil asjade vertikaalne tsentreerimine ülilihtne.
Elemendi vertikaalseks tsentreerimiseks rakendage display: flex
ja align-items: center
vanemelemendile:
.container { ... display: flex; align-items: center; }

How to Center Both Vertically and Horizontally
How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins
This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.
Set the display
property of the parent element to relative
.
Then set the child's display
property to absolute
, top
to 50%
, and left
to 50%
. This just centers the top left corner of the child element vertically and horizontally.
To truly center the child element, apply a negative top margin set to half the child element's height, and a negative left margin set to half the child element's width:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

How to Center a Div Vertically and Horizontally with Transform and Translate
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display
property of the parent element to relative
.
Next, set the child element's display
property to absolute
, top
to 50%
, and left
to 50%
.
Finally, use transform: translate(-50%, -50%)
to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center
and align-items: center
to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }

See on kõik, mida peate teadma, et neist parimat teha. Nüüd minge edasi ja keskendage kõik asjad.