Vertikalus teksto centravimas skyrelyje naudojant CSS

Vertikalus teksto centravimas skyrelyje naudojant CSS
Vertikalus teksto centravimas skyrelyje naudojant CSS
Alice Dupont
2024 m. liepos 13 d., šeštadienis 21:45:23

Vertikaliai centruokite tekstą Div viduje su CSS

Vertikaliai išlygiuoti tekstą „div“ gali būti įprastas iššūkis kuriant žiniatinklio dizainą. Užtikrinkite, kad tekstas būtų idealiai centre, gali pagerinti turinio estetiką ir skaitomumą.

Šiame straipsnyje išnagrinėsime įvairius būdus, kaip pasiekti vertikalų teksto centravimą „div“, naudojant CSS. Pradėsime nuo paprasto pavyzdžio, o tada įsigilinsime į pažangesnius metodus, siekdami užtikrinti suderinamumą įvairiose naršyklėse ir įrenginiuose.

komandą apibūdinimas
display: flex; Apibrėžia lanksčią talpyklą, leidžiančią naudoti „flexbox“ išdėstymą.
justify-content: center; Lankstūs daiktai lanksčiame konteineryje horizontaliai centruojami.
align-items: center; Vertikaliai centruoja lankstus elementus lankstaus konteinerio viduje.
display: grid; Apibrėžia tinklelio talpyklą, leidžiančią naudoti tinklelio išdėstymą.
place-items: center; Centruoja elementus tiek horizontaliai, tiek vertikaliai tinklelio konteineryje.
display: table; Apibrėžia elementą kaip lentelę, leidžiančią taikyti lentelės išdėstymo ypatybes.
display: table-cell; Apibrėžia elementą kaip lentelės langelį, įgalindamas vertikalaus lygiavimo ypatybes.
vertical-align: middle; Vertikaliai centruoja turinį lentelės langelio elemente.
line-height: 170px; Nustato eilutės aukštį, lygų sudėtinio rodinio aukščiui, kad tekstas būtų vertikaliai centre.

Vertikalaus teksto centravimo būdai naudojant CSS

Pirmajame scenarijaus pavyzdyje mes naudojame display: flex; apibrėžti lanksčią talpyklą. Tai leidžia naudoti „Flexbox“ išdėstymo ypatybes. Pagal nustatymą justify-content: center; ir align-items: center;, galime horizontaliai ir vertikaliai centruoti tekstą viduje

elementas. Šis metodas yra labai efektyvus ir lengvai įgyvendinamas, todėl yra populiarus šiuolaikinio interneto dizaino pasirinkimas. „Flexbox“ ypač naudinga dėl savo jautrumo ir lengvo derinimo, todėl kūrėjai gali kurti išdėstymus, kurie gerai prisitaiko prie skirtingų ekrano dydžių ir orientacijų.

Antrajame scenarijaus pavyzdyje naudojamas CSS tinklelio išdėstymas naudojant display: grid;. Pagal nustatymą place-items: center;, tekstas tinklelio konteineryje centruojamas tiek horizontaliai, tiek vertikaliai. CSS Grid siūlo galingesnę ir lankstesnę žiniatinklio maketų kūrimo sistemą, palyginti su tradiciniais metodais. Tai suteikia galimybę lengvai kurti sudėtingus, jautrius dizainus. The place-items: center; komanda yra glaustas būdas vertikaliai ir horizontaliai centruoti, supaprastinant kodą ir pagerinant skaitomumą.

Pažangios CSS technologijos vertikaliam centravimui

Trečiame scenarijuje naudojame lentelės rodymo metodą. Nustatymas display: table; ant konteinerio ir display: table-cell; ant pseudoelemento, sukurto su ::before leidžia mums naudotis vertical-align: middle; nuosavybė. Šis metodas imituoja lentelės langelių elgseną, todėl turinį galima centruoti vertikaliai. Nors šiuolaikiniame žiniatinklio dizaine šis metodas naudojamas rečiau, jis gali būti naudingas palaikant suderinamumą su senesnėmis naršyklėmis arba dirbant su senu kodu. Tai patikimas būdas sutelkti turinį nepasikliaujant naujesnėmis išdėstymo sistemomis.

Ketvirtajame scenarijaus pavyzdyje naudojamas line-height nuosavybė. Nustatydami line-height lygus konteinerio aukščiui, tekstas yra vertikaliai centre. Ši technika yra paprasta ir efektyvi vienos eilutės tekstui. Tačiau jis gali netikti kelių eilučių tekstui arba dinaminiam turiniui, kai gali keistis sudėtinio rodinio aukštis. Nepaisant savo apribojimų, line-height metodas yra greitas ir paprastas sprendimas vertikaliai centruoti tekstą paprastuose scenarijuose.

„Flexbox“ naudojimas vertikaliam centravimui

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Tinklelio naudojimas vertikaliam centravimui

CSS tinklelis

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Lentelės ekrano naudojimas vertikaliam centravimui

CSS lentelės ekranas

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Linijos aukščio naudojimas vertikaliam centravimui

CSS linijos aukštis

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Vertikalaus centravimo CSS transformacijos tyrinėjimas

Kitas veiksmingas būdas vertikaliai centruoti tekstą a div naudoja CSS transform nuosavybė. Sujungus position: absolute; su transform: translateY(-50%);, galime pasiekti tikslų vertikalų išlygiavimą. Pirma, div yra nustatytas position: relative; veikti kaip atskaitos taškas. Tada vaikas elementas su position: absolute; yra 50 % pirminio sudėtinio rodinio viršuje. Galiausiai, taikymas transform: translateY(-50%); perkelia elementą į viršų per pusę jo aukščio, puikiai centruodamas jį vertikaliai.

Šis metodas suteikia didelį lankstumą ir puikiai tinka įvairių tipų turiniui, įskaitant tekstą ir vaizdus. Tai ypač naudinga dirbant su dinamišku turiniu, nes centravimo efektas išlieka nuoseklus, nepaisant turinio aukščio. Be to, derinant transform su kitomis CSS ypatybėmis leidžia kurti sudėtingesnius ir kūrybiškesnius išdėstymo dizainus. Nors šis metodas reikalauja šiek tiek daugiau kodo, palyginti su „Flexbox“ ar „Grid“, jis siūlo tikslią elementų padėties valdymą.

Dažni klausimai apie vertikalųjį centravimą CSS

  1. Koks yra lengviausias būdas vertikaliai centruoti tekstą div?
  2. Naudojant display: flex; su justify-content: center; ir align-items: center; dažnai yra lengviausias ir efektyviausias būdas.
  3. Kaip vertikaliai centruoti tekstą senesnėse naršyklėse?
  4. Naudojant lentelės rodymo metodą su display: table; ir vertical-align: middle; gali padėti pasiekti vertikalų centravimą senesnėse naršyklėse.
  5. Ar CSS tinklelis gali būti naudojamas tekstui centruoti vertikaliai?
  6. Taip, CSS tinklelis gali centruoti tekstą vertikaliai display: grid; ir place-items: center;.
  7. Ar galima vertikaliai centruoti kelių eilučių tekstą?
  8. Taip, naudojant „Flexbox“ arba „CSS Grid“ galima lengvai centruoti kelių eilučių tekstą vertikaliai konteineryje.
  9. Kaip vertikaliai centruoti tekstą su žinomu konteinerio aukščiu?
  10. Galite nustatyti line-height ypatybę, kad ji atitiktų sudėtinio rodinio aukštį ir efektyviai centruotų tekstą.
  11. Ką daryti, jei konteinerio aukštis yra dinamiškas?
  12. Naudojant Flexbox, Grid arba transform savybė užtikrina nuoseklų vertikalų centravimą, net ir esant dinaminiam konteinerio aukščiui.
  13. Ar yra kokių nors naudojimo trūkumų transform: translateY(-50%);?
  14. Nors tai veiksminga, ji reikalauja, kad tėvai turėtų position: relative; ir gali būti šiek tiek sudėtingiau įdiegti, palyginti su „Flexbox“ ar „Grid“.
  15. Kaip vertikaliai centruoti tekstą interaktyviame dizaine?
  16. Labai rekomenduojama naudoti „Flexbox“ arba „CSS Grid“ reaguojant į dizainą, nes jie puikiai prisitaiko prie skirtingų ekranų dydžių ir orientacijų.

Paskutinės mintys apie vertikalųjį centravimą

Vertikalus teksto centravimas elemente „div“ gali būti atliktas keliais efektyviais metodais. Šiuolaikinės technologijos, tokios kaip „Flexbox“ ir „Grid“, siūlo didžiausią lankstumą ir lengvumą. Senesni metodai, tokie kaip lentelės rodymas ir linijos aukštis, vis dar gali būti naudingi tam tikrais atvejais. Suprasdami ir taikydami šiuos skirtingus metodus, kūrėjai gali užtikrinti, kad jų turinys būtų vizualiai patrauklus ir tinkamai suderintas įvairiuose įrenginiuose ir naršyklėse.