Kaip centruoti vaizdą vertikaliai ir horizontaliai naudojant CSS
Daugelis kūrėjų kovoja dirbdami su vaizdais. Reagavimas ir derinimas yra ypač sunkus, ypač centruojant vaizdą puslapio viduryje.
Taigi šiame įraše aš parodysiu keletą labiausiai paplitusių vaizdų centravimo būdų tiek vertikaliai, tiek horizontaliai, naudojant skirtingas CSS ypatybes.
Ankstesniame įraše apžvelgiau CSS pozicijos ir rodymo ypatybes. Jei nesate susipažinę su tomis savybėmis, rekomenduoju prieš perskaičius šį straipsnį patikrinti tuos įrašus.
Štai vaizdo įrašo versija, jei norite ją patikrinti:
Vaizdo centravimas horizontaliai
Pradėkime nuo vaizdo centravimo horizontaliai, naudodami 3 skirtingas CSS ypatybes.
Teksto lygiuoti
Pirmasis būdas sutelkti vaizdą horizontaliai yra text-align
nuosavybės naudojimas. Tačiau šis metodas veikia tik tuo atveju, jei vaizdas yra bloko lygio talpykloje, pavyzdžiui :
div { text-align: center; }
Marža: automatinė
Kitas vaizdo centravimo būdas yra ypatybės naudojimas margin: auto
(kairės ir dešinės paraštėms).
Tačiau margin: auto
vien naudojimas vaizdams neveiks. Jei jums reikia naudoti margin: auto
, taip pat turite naudoti 2 papildomas savybes.
Savybė paraštė-auto neturi jokio poveikio tiesioginio lygio elementams. Kadangi
žyma yra tiesioginis elementas, pirmiausia turime ją konvertuoti į bloko lygio elementą:
img { margin: auto; display: block; }
Antra, mes taip pat turime apibrėžti plotį. Taigi kairė ir dešinė paraštės gali užimti likusią tuščią vietą ir automatiškai sulygiuoti, o tai daro apgaulę (nebent mes suteikiame jai 100% plotį):
img { width: 60%; margin: auto; display: block; }
Ekranas: lankstus
Trečias būdas horizontaliai sutelkti vaizdą yra naudojimas display: flex
. Kaip ir text-align
turtą naudojome display: flex
konteineriui, taip pat ir konteineriui.
Tačiau display: flex
vien naudoti nepakaks. Talpykloje taip pat turi būti papildoma savybė, vadinama justify-content
:
div { display: flex; justify-content: center; } img { width: 60%; }
justify-content
Nuosavybė veikia kartu su display: flex
, kurį mes galime naudoti iki centro vaizdą horizontaliai.
Galiausiai, vaizdo plotis turi būti mažesnis nei talpyklos plotis, kitaip jis užima 100% vietos ir tada mes negalime jo centruoti.
Svarbu:display: flex
nuosavybė nepalaikomas senesnių versijų naršykles. Daugiau informacijos rasite čia.
Vaizdo centravimas vertikaliai
Ekranas: lankstus
Vertikaliam lygiavimui display: flex
vėl naudinga naudoti.
Apsvarstykite atvejį, kai mūsų konteinerio aukštis yra 800 taškų, bet vaizdo aukštis yra tik 500 taškų:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }
Šiuo atveju, pridėjus vieną kodo eilutę prie konteinerio, align-items: center
yra triukas:
div { display: flex; justify-content: center; align-items: center; height: 800px; }
Į align-items
nuosavybė gali padetis elementai vertikaliai, jei naudojamas kartu su display: flex
.
Pozicija: absoliučios ir transformavimo ypatybės
Kitas vertikalaus lygiavimo metodas yra kartu position
ir transform
savybių naudojimas. Šis yra šiek tiek sudėtingas, todėl darykime tai žingsnis po žingsnio.
1 veiksmas: apibrėžkite absoliučią poziciją
Pirma, mes keičiame vaizdo pozicionavimo elgesį iš static
į absolute
:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }
Be to, jis turėtų būti santykinai išdėstyto konteinerio viduje, todėl mes pridedame position: relative
prie jo konteinerio div.
2 žingsnis: apibrėžkite viršutines ir kaires ypatybes
Antra, mes apibrėžiame viršutinę ir kairę vaizdo ypatybes ir nustatome jas iki 50%. Vaizdo pradinis taškas (viršuje, kairėje) bus perkeltas į konteinerio centrą:
img { width: 80%; position: absolute; top: 50%; left: 50%; }
3 žingsnis: apibrėžkite transformacijos ypatybę
Tačiau antrasis žingsnis iš dalies perkėlė vaizdą iš savo talpyklos. Taigi turime jį grąžinti į vidų.
Apibrėžiant transform
ypatybę ir pridedant -50% prie jos X ir Y ašių, pavyksta:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Yra ir kitų būdų, kaip sutelkti dalykus horizontaliai ir vertikaliai, tačiau aš paaiškinau dažniausiai pasitaikančius dalykus. Tikiuosi, kad šis įrašas padėjo suprasti, kaip sulyginti vaizdus puslapio centre.
Jei norite sužinoti daugiau apie žiniatinklio plėtrą, nedvejodami apsilankykite mano „Youtube“ kanale.
Ačiū, kad skaitėte!