Į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
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
Antrajame scenarijuje mes naudojame CSS Grid pasiekti panašių rezultatų. Kreipdamiesi display: grid; į pirminį konteinerį ir place-items: center;, 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 top: 50%; ir left: 50%; su transform: translate(-50%, -50%); 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 text-align: center; nuosavybė. Šis metodas ypač veiksmingas naudojant įterptuosius blokus arba įterptus elementus. Kreipdamiesi text-align: center; į 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 margin: auto; 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.
Dažni klausimai ir atsakymai apie centravimo elementus
- Kaip centruoti eilutinį elementą?
- Naudokite text-align: center; pirminiame sudėtiniame rodinyje, kad centre būtų įterptieji elementai.
- Ar galiu naudoti paraštę: auto; centruoti bloko elementą?
- Taip, nustatymas margin: auto; kairėje ir dešinėje pusėse bus centre bloko elementas.
- Kuo skiriasi „Flexbox“ ir „Grid“ centravimui?
- Flexbox naudojamas vienmačiams maketams, tuo tarpu Grid skirtas dvimačiams maketams.
- Kaip fiksuoto pločio elementą sucentruoti naudojant CSS?
- Naudokite margin: auto; arba position: absolute; su transform: translate(-50%, -50%);
- Ar galiu su „Flexbox“ centruoti elementus vertikaliai?
- Taip, naudoti align-items: center; centruoti elementus vertikaliai lanksčiame konteineryje.
- Ar lygiuoja tekstą: centre; dirbti blokiniams elementams?
- ne, text-align: center; veikia tik įterptiesiems arba įterptiesiems blokiniams elementams.
- Kaip sudėtiniame rodinyje sutelkti kelis elementus?
- Naudokite display: flex; su justify-content: center; ir align-items: center;
- Kas yra vietos elementai: centras; tinkle?
- place-items: center; centruoja elementus tiek horizontaliai, tiek vertikaliai tinklelio talpykloje.
- Ar galima centruoti elementus be „Flexbox“ ar „Grid“?
- Taip, naudojant tokius metodus kaip margin: auto;, text-align: center;, arba position: absolute; 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 Flexbox, Grid, ir traditional CSS 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.