Kaip horizontaliai centruoti padalinį naudojant CSS

Mia Chevalier
2024 m. birželio 16 d., sekmadienis 02:19:44
HTML and CSS

Įvaldyti Div Alignment su CSS

Elementų centravimas horizontaliai CSS yra įprasta užduotis, su kuria susiduria žiniatinklio kūrėjai. Nesvarbu, ar tai būtų mygtuko, vaizdo ar elemento išlygiavimas, pasiekti tobulą išlygiavimą kartais gali būti sudėtinga. Šiame vadove išnagrinėsime įvairius būdus, kaip horizontaliai centruoti a

kito viduje
naudojant CSS.

Suprasdami ir taikydami šiuos metodus, galite užtikrinti, kad jūsų žiniatinklio elementai būtų išdėstyti tiksliai ten, kur norite. Apžvelgsime įvairius metodus, įskaitant lanksčią dėžę, tinklelį ir tradicinius metodus, kad galėtumėte visapusiškai suprasti šį esminį CSS įgūdžius.

komandą apibūdinimas
display: flex; Apibrėžiamas lankstus konteineris ir įjungiamas lanksčios dėžutės išdėstymas.
justify-content: center; Centruoja elementus horizontaliai lanksčiame konteineryje.
align-items: center; Centruoja elementus vertikaliai lankstaus konteinerio viduje.
place-items: center; Centruoja elementus tiek horizontaliai, tiek vertikaliai tinklelio talpykloje.
transform: translate(-50%, -50%); Perkelia elementą 50 % jo paties pločio ir aukščio, kad jis būtų centre.
position: absolute; Nustato elemento padėtį artimiausio jo protėvio atžvilgiu.
top: 50%; Pastato elementą 50 % nuo jį turinčio elemento viršaus.
left: 50%; Padeda elementą 50 % nuo jo turinčio elemento kairės.

Elementų centravimas naudojant „Flexbox“, tinklelį ir tradicinį CSS

Pirmasis scenarijus parodo, kaip centruoti a

naudojant . Pagal nustatymą pirminiame konteineryje antriniai elementai tampa lanksčiais elementais. The nuosavybė centruoja šiuos elementus horizontaliai, o align-items: center; centruoja juos vertikaliai. Šis metodas yra labai universalus ir puikiai tinka dinaminiams maketams.

Antrajame scenarijuje mes naudojame pasiekti panašių rezultatų. Kreipdamiesi į pirminį konteinerį ir , antriniai elementai centruojami tiek horizontaliai, tiek vertikaliai. Šis metodas ypač naudingas tinkleliu pagrįstiems maketams. Galiausiai, tradicinis metodas apima nustatymą position: absolute; ant vaiko elemento ir naudojimo ir su sutelkti jį tėvų viduje. Šis metodas yra veiksmingas fiksuoto dydžio elementams.

Naudodami „Flexbox“ horizontaliai centruokite „Div

HTML ir CSS su Flexbox

<!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>

Div centravimas naudojant CSS tinklelį

HTML ir CSS su tinklelio išdėstymu

<!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>

Tradicinis centravimo su CSS metodas

HTML ir CSS su Margin Auto

<!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>

Pažangūs elementų centravimo metodai

Kitas būdas centruoti elementus horizontaliai konteineryje yra naudoti nuosavybė. Šis metodas ypač veiksmingas naudojant įterptuosius blokus arba įterptus elementus. Kreipdamiesi į pirminį sudėtinį rodinį, visi antriniai elementai bus centre horizontaliai. Tačiau šis metodas neveikia bloko lygio elementams, nebent jie konvertuojami į eilutinį bloką.

Be to, galite naudoti bloko lygio elementų centravimo savybė. Nustatę kairę ir dešinę elemento paraštes į automatines, galite horizontaliai centruoti jį pirminiame konteineryje. Ši technika yra paprasta ir puikiai tinka fiksuoto pločio elementams. Šiuos metodus derinant su šiuolaikinėmis CSS išdėstymo technikomis, tokiomis kaip „Flexbox“ ir „Grid“, gaunamas išsamus įrankių rinkinys, skirtas tiksliai pagal poreikį suderinti elementus.

  1. Kaip centruoti eilutinį elementą?
  2. Naudokite pirminiame sudėtiniame rodinyje, kad centre būtų įterptieji elementai.
  3. Ar galiu naudoti paraštę: auto; centruoti bloko elementą?
  4. Taip, nustatymas kairėje ir dešinėje pusėse bus centre bloko elementas.
  5. Kuo skiriasi „Flexbox“ ir „Grid“ centravimui?
  6. naudojamas vienmačiams maketams, tuo tarpu skirtas dvimačiams maketams.
  7. Kaip fiksuoto pločio elementą sucentruoti naudojant CSS?
  8. Naudokite arba su
  9. Ar galiu su „Flexbox“ centruoti elementus vertikaliai?
  10. Taip, naudoti centruoti elementus vertikaliai lanksčiame konteineryje.
  11. Ar lygiuoja tekstą: centre; dirbti blokiniams elementams?
  12. ne, veikia tik įterptiesiems arba įterptiesiems blokiniams elementams.
  13. Kaip sudėtiniame rodinyje sutelkti kelis elementus?
  14. Naudokite su ir
  15. Kas yra vietos elementai: centras; tinkle?
  16. centruoja elementus tiek horizontaliai, tiek vertikaliai tinklelio talpykloje.
  17. Ar galima centruoti elementus be „Flexbox“ ar „Grid“?
  18. Taip, naudojant tokius metodus kaip , , arba taip pat gali centruoti elementus.

CSS centravimo metodų užbaigimas

Norint sukurti vizualiai patrauklius žiniatinklio maketus, labai svarbu suprasti, kaip centruoti elementus horizontaliai naudojant skirtingus CSS metodus. Įvaldydami tokias technikas kaip , , ir ypatybes, kūrėjai gali užtikrinti, kad jų dizainas būtų funkcionalus ir estetiškas. Eksperimentuodami su šiais metodais galėsite geriau suprasti CSS galimybes.