Ako vycentrovať obrázok v Div vodorovne?

• Ako vycentrovať obrázok v Div vodorovne?
• Maržový majetok
• Modul Flexbox
• Rozloženie zobrazenia mriežky
• Atribút pozície

Ako vycentrovať obrázok v Div vodorovne?

Vývojár môže použiť vlastnosť okraja, modul Flexbox, rozloženie zobrazenia mriežky a atribút Poloha na horizontálne vycentrovanie obrázka v prvku div. Podľa nižšie uvedeného návodu zarovnajte obrázok vodorovne na stred v značke div.

Predpokladajme, že existuje div, v ktorom je obrázok umiestnený týmto spôsobom v súbore HTML:

Obrázok získava šírku a výšku 50 % a triedu „obrázku“.

Použitie Margin Property

Používatelia môžu pridať priestor okolo prvkov HTML pomocou vlastnosti margin. Priradí okraj podľa dostupného priestoru po zmene veľkosti obrazovky okna. Napríklad nastaví ľavý a pravý okraj na auto a vlastnosť zobrazenia sa nastaví na blokovanie:

Po vykonaní vyššie uvedeného príkladu bude webová stránka vyzerať takto:

Vyššie uvedený výstup ukázal, že obrázok je teraz v strede.

Použitie modulu Flexbox

' flexbox “ je modul, ktorý obsahuje kompletnú sadu vlastností. V našom prípade vyberte triedu koreňového prvku a použite flex ako hodnotu vlastnosti display. Nastavte stred ako hodnotu pre „ ospravedlniť-obsah “ a „ align-items vlastnosti:

Webová stránka po vykonaní kódu vyzerá takto:

Vyššie uvedený výstup ukazuje, že obrázok je zobrazený v strede div s farbou pozadia nastavenou na „modrú“.

Použitie modulu rozloženia zobrazenia mriežky

Rozloženie zobrazenia mriežky má 12 stĺpcov a celková šírka je nastavená na 100 % a každý prvok umiestňuje na konkrétne miesto na webovej stránke:

Vo vyššie uvedenom útržku kódu je k vlastnosti display priradená hodnota „grid“. Zatiaľ čo „place-item“ sa používa ako skratka pre vlastnosti „justify-content“ a „align-items“:

Výstup overí, že obrázok je v strede div pomocou metódy mriežky:

Použitie atribútu pozície

Nastavením pozície koreňovej triedy na relatívnu hodnotu a triedy obrázkov na absolútnu hodnotu. Obrázok môže byť zobrazený v strede div:

Obrázok sa presunie doľava od „50 %“ a potom sa transformuje späť na „-50 %“ na osi X. Zobrazuje obrázok v strede časti vodorovne:

Takto môže byť obrázok vodorovne vycentrovaný.

Záver

Ak chcete vodorovne nastaviť obrázok v prvku div, použite „ marža “, “ flexibilný modul “, “ rozloženie mriežky “ a „ pozíciu vlastnosti. ' marža ” vlastnosť vľavo a vpravo je nastavená na auto. Modul „flex modul“ a „rozloženie mriežky“ nastavia displej na ohyb a mriežku a použijú umiestniť položku “ vlastnosť na vycentrovanie obrazu. Vlastnosť position nastavuje hodnotu relatívne ku koreňovej triede a absolútnu k triede obrázkov a používa vlastnosti „left“ a „transform“. Tento blog úspešne ukázal, ako horizontálne vycentrovať obrázky v div.