- Cum să centrați o imagine în Div orizontal?
- Proprietatea marjei
- Modul Flexbox
- Aspect vizualizare grilă
- Atribut de poziție
Cum să centrați o imagine în Div orizontal?
Dezvoltatorul poate utiliza proprietatea margine, modulul Flexbox, aspectul Grid View și atributul Poziție pentru a centra o imagine în div pe orizontală. Urmați ghidul de mai jos pentru a centra imaginea pe orizontală în eticheta div.
Să presupunem că există un div în care imaginea este plasată în acest fel în fișierul HTML:
< div clasă = 'rădăcină' >
< img src = „../book.jpg” înălţime = 'cincizeci%' lăţime = 'cincizeci%' clasă = 'imagine' >
< / div >
Imaginea primește o lățime și înălțime de 50% și o clasă de „imagine”.
Utilizarea proprietății Margin
Utilizatorii pot adăuga spațiu în jurul elementelor HTML folosind proprietatea margine. Acesta atribuie o marjă în funcție de spațiul disponibil după redimensionarea ecranului ferestrei. De exemplu, setează marja-stânga și dreapta la automat, iar proprietatea de afișare este setată să blocheze:
img {
afisare: bloc;
margine-stânga: auto;
margine-dreapta: auto;
}
După executarea exemplului de mai sus, pagina web arată astfel:
Ieșirea de mai sus a afișat că imaginea este acum în centru.
Folosind modulul Flexbox
„ flexbox ” este un modul care conține un set complet de proprietăți. În cazul nostru, selectați clasa elementului rădăcină și utilizați flex ca valoare a proprietății de afișare. Setați centrul ca valoare pentru „ justifica-conținut ' și ' alinierea elementelor ” proprietăți:
.rădăcină {display: flex;
justifica- conţinut : centru;
alinierea elementelor: centru;
fundal- culoare : albastru;
}
Pagina web arată astfel, după executarea codului:
Rezultatul de mai sus arată că imaginea este afișată în centrul div-ului având o culoare de fundal setată la „albastru”.
Utilizarea modulului de aspect Grid View
Aspectul vizualizării grilă are 12 coloane, iar lățimea totală este setată la 100% și plasează fiecare element într-o anumită poziție pe pagina web:
.rădăcină {afisare: grila;
obiecte-loc: centru;
}
În fragmentul de cod de mai sus, valoarea „grilă” este atribuită proprietății de afișare. În timp ce „place-item” este folosit ca prescurtare pentru proprietățile „justify-content” și „align-items”:
Ieșirea autentifică faptul că imaginea se află în centrul div-ului folosind metoda grilei:
Utilizarea atributului de poziție
Prin setarea poziției clasei rădăcină la valoare relativă și a clasei de imagine la valoare absolută. Imaginea poate fi afișată în centrul div:
.rădăcină {poziție: relativă;
}
.imagine {
lăţime : 700px;
înălţime : 500px;
poziție: absolută;
stânga: cincizeci %;
transforma: translateX ( - cincizeci % ) ;
}
Imaginea este mutată la stânga „50%” și apoi se transformă înapoi în „-50%” pe axa X. Afișează imaginea în centrul div-ului pe orizontală:
Așa se poate centra imaginea în div pe orizontală.
Concluzie
Pentru a seta pe orizontală imaginea într-un element div, utilizați „ marginea ”, “ modul flex ”, “ aspectul grilei ' și ' poziţie ” proprietăți. „ marginea ” proprietatea stânga și dreapta este setată la automat. „Modulul flexibil” și „Aspectul grilei” setează afișajul la flexibilitate și, respectiv, grilă și utilizează „ plasează elementul „ proprietate pentru a centra imaginea. Proprietatea poziție setează valoarea relativă la clasa rădăcină și absolută la clasa imagine și folosește proprietățile „left” și „transform”. Acest blog a demonstrat cu succes cum să centrați imaginile într-un div pe orizontală.