Divi horisontaalne tsentreerimine CSS-i abil

Mia Chevalier

Pühapäev, 16. juuni 2024 01:48:40

Divide joondamise valdamine CSS-iga

Elementide horisontaalne tsentreerimine CSS-is on tavaline ülesanne, millega veebiarendajad kokku puutuvad. Olenemata sellest, kas see on nupu, pildi või div joondamine, võib täiusliku joonduse saavutamine mõnikord olla keeruline. Selles juhendis uurime erinevaid meetodeid a horisontaalseks tsentreerimiseks

teise sees

kasutades CSS-i.

Nendest tehnikatest aru saades ja neid rakendades saate tagada, et teie veebielemendid on paigutatud täpselt sinna, kuhu soovite. Käsitleme erinevaid lähenemisviise, sealhulgas flexbox, grid ja traditsioonilisi meetodeid, et anda teile põhjalik arusaam sellest olulisest CSS-i oskusest.

Käsk	Kirjeldus
display: flex;	Määratleb painduva konteineri ja võimaldab paindlikku paigutust.
justify-content: center;	Tsentreerib üksused horisontaalselt painduvas konteineris.
align-items: center;	Tsentreerib üksused vertikaalselt painduvas konteineris.
place-items: center;	Tsentreerib üksused nii horisontaalselt kui ka vertikaalselt ruudustiku konteinerisse.
transform: translate(-50%, -50%);	Nihutab elementi 50% võrra selle enda laiusest ja kõrgusest, et see tsentreerida.
position: absolute;	Positsioneerib elemendi selle lähima positsioneeritud esivanema suhtes.
top: 50%;	Paigutab elemendi 50% kaugusele seda sisaldava elemendi ülaosast.
left: 50%;	Paigutab elemendi seda sisaldavast elemendist 50% vasakule.

Elementide tsentreerimine Flexboxi, ruudustiku ja traditsioonilise CSS-iga

Esimene skript näitab, kuidas a tsentreerida

kasutades . Seadistades emakonteineris muutuvad alamelemendid paindlikeks üksusteks. The atribuut koondab need üksused horisontaalselt, samas align-items: center; tsentreerib need vertikaalselt. See meetod on väga mitmekülgne ja sobib hästi dünaamiliste paigutuste jaoks.

Teises skriptis kasutame sarnaste tulemuste saavutamiseks. Kandideerides emakonteinerisse ja , on alamelemendid tsentreeritud nii horisontaalselt kui ka vertikaalselt. See meetod on eriti kasulik ruudustikupõhiste paigutuste puhul. Lõpuks hõlmab traditsiooniline meetod seadistamist position: absolute; alamelemendi ja kasutamise kohta ja koos et see vanemasse koondada. See lähenemisviis on efektiivne fikseeritud suurusega elementide puhul.

Flexboxi kasutamine jaotuse horisontaalseks tsentreerimiseks

HTML ja CSS koos Flexboxiga

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Divi tsentreerimine CSS-ruudustikuga

HTML ja CSS koos ruudustiku paigutusega

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Traditsiooniline CSS-i tsentreerimise meetod

HTML ja CSS koos Margin Autoga

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Täiustatud tehnikad elementide tsentreerimiseks

Teine meetod elementide horisontaalseks tsentreerimiseks konteineris hõlmab vara. See lähenemine on eriti tõhus reas-ploki või tekstisiseste elementide puhul. Kandideerides emakonteinerisse tsentreeritakse kõik alamelemendid horisontaalselt. See meetod ei tööta aga plokitaseme elementide puhul, välja arvatud juhul, kui need on teisendatud reasiseseks plokiks.

Lisaks saate kasutada omadus plokitasandi elementide tsentreerimiseks. Kui määrate elemendi vasaku ja parema veerise automaatseks, saate selle horisontaalselt tsentreerida oma emakonteinerisse. See tehnika on lihtne ja sobib hästi fikseeritud laiusega elementide jaoks. Nende meetodite kombineerimine kaasaegsete CSS-i paigutustehnikatega, nagu Flexbox ja Grid, annab tervikliku tööriistakomplekti elementide täpseks joondamiseks vastavalt vajadusele.

Kuidas tsentreerida sisemist elementi?
Kasutage emakonteineril sisemiste elementide keskele.
Kas ma saan kasutada marginaali: auto; plokielemendi tsentreerimiseks?
Jah, seadistus vasakul ja paremal küljel tsentreerib plokielementi.
Mis vahe on tsentreerimiseks Flexboxil ja Gridil?
kasutatakse ühemõõtmeliste paigutuste jaoks, samas on mõeldud kahemõõtmeliste paigutuste jaoks.
Kuidas tsentreerida fikseeritud laiusega elementi CSS-iga?
Kasuta või koos
Kas ma saan Flexboxiga elemente vertikaalselt tsentreerida?
Jah, kasuta elementide vertikaalseks tsentreerimiseks painduvas mahutis.
Kas teksti joondamine: keskel; kas plokielementide jaoks?
ei, töötab ainult tekstisiseste või inline-block elementide puhul.
Kuidas tsentreerida mitu elementi konteineris?
Kasuta koos ja
Mis on kohaelemendid: keskpunkt; võrgus?
tsentreerib üksused nii horisontaalselt kui ka vertikaalselt ruudustiku konteinerisse.
Kas elemente on võimalik tsentreerida ilma Flexboxi või Gridita?
Jah, kasutades selliseid meetodeid nagu , , või saab ka elemente tsentreerida.

CSS-i tsentreerimistehnikate kokkuvõte

Visuaalselt atraktiivsete veebipaigutuste loomiseks on oluline mõista, kuidas elemente horisontaalselt tsentreerida, kasutades erinevaid CSS-i meetodeid. Omandades selliseid tehnikaid nagu , ja omadused, saavad arendajad tagada, et nende disainilahendused on nii funktsionaalsed kui ka esteetiliselt meeldivad. Nende meetodite katsetamine annab CSS-i võimalustest sügavama ülevaate.