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-alignnuosavybė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: autovien 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
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-alignturtą naudojome display: flexkonteineriui, taip pat ir konteineriui.
Tačiau display: flexvien naudoti nepakaks. Talpykloje taip pat turi būti papildoma savybė, vadinama justify-content:
div { display: flex; justify-content: center; } img { width: 60%; }justify-contentNuosavybė 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: flexvė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: centeryra triukas:
div { display: flex; justify-content: center; align-items: center; height: 800px; }Į align-itemsnuosavybė gali padetis elementai vertikaliai, jei naudojamas kartu su display: flex.
Pozicija: absoliučios ir transformavimo ypatybės
Kitas vertikalaus lygiavimo metodas yra kartu positionir transformsavybių 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: relativeprie 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 transformypatybę 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!
