Divi horisontaalne tsentreerimine CSS-i abil

Divi horisontaalne tsentreerimine CSS-i abil
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 Flexbox. Seadistades display: flex; emakonteineris muutuvad alamelemendid paindlikeks üksusteks. The justify-content: center; 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 CSS Grid sarnaste tulemuste saavutamiseks. Kandideerides display: grid; emakonteinerisse ja place-items: center;, 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 top: 50%; ja left: 50%; koos transform: translate(-50%, -50%); 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 text-align: center; vara. See lähenemine on eriti tõhus reas-ploki või tekstisiseste elementide puhul. Kandideerides text-align: center; 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 margin: auto; 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.

Levinud küsimused ja vastused tsentreerimiselementide kohta

  1. Kuidas tsentreerida sisemist elementi?
  2. Kasutage text-align: center; emakonteineril sisemiste elementide keskele.
  3. Kas ma saan kasutada marginaali: auto; plokielemendi tsentreerimiseks?
  4. Jah, seadistus margin: auto; vasakul ja paremal küljel tsentreerib plokielementi.
  5. Mis vahe on tsentreerimiseks Flexboxil ja Gridil?
  6. Flexbox kasutatakse ühemõõtmeliste paigutuste jaoks, samas Grid on mõeldud kahemõõtmeliste paigutuste jaoks.
  7. Kuidas tsentreerida fikseeritud laiusega elementi CSS-iga?
  8. Kasuta margin: auto; või position: absolute; koos transform: translate(-50%, -50%);
  9. Kas ma saan Flexboxiga elemente vertikaalselt tsentreerida?
  10. Jah, kasuta align-items: center; elementide vertikaalseks tsentreerimiseks painduvas mahutis.
  11. Kas teksti joondamine: keskel; kas plokielementide jaoks?
  12. ei, text-align: center; töötab ainult tekstisiseste või inline-block elementide puhul.
  13. Kuidas tsentreerida mitu elementi konteineris?
  14. Kasuta display: flex; koos justify-content: center; ja align-items: center;
  15. Mis on kohaelemendid: keskpunkt; võrgus?
  16. place-items: center; tsentreerib üksused nii horisontaalselt kui ka vertikaalselt ruudustiku konteinerisse.
  17. Kas elemente on võimalik tsentreerida ilma Flexboxi või Gridita?
  18. Jah, kasutades selliseid meetodeid nagu margin: auto;, text-align: center;, või position: absolute; 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 Flexbox, Gridja traditional CSS 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.