- Jak vycentrovat obrázek v Div vodorovně?
- Margin Property
- Modul Flexbox
- Rozvržení zobrazení mřížky
- Atribut pozice
Jak vycentrovat obrázek v Div vodorovně?
Vývojář může využít vlastnost margin, modul Flexbox, rozvržení zobrazení mřížky a atribut Position k vystředění obrázku v prvku div vodorovně. Podle níže uvedeného průvodce zarovnejte obrázek vodorovně na střed ve značce div.
Předpokládejme, že existuje div, ve kterém je obrázek umístěn tímto způsobem v souboru HTML:
< div třída = 'vykořenit' >
< img src = '../kniha.jpg' výška = 'padesáti%' šířka = 'padesáti%' třída = 'obraz' >
< / div >
Obrázek získává šířku a výšku 50 % a třídu „image“.
Použití Margin Property
Uživatelé mohou přidat prostor kolem prvků HTML pomocí vlastnosti margin. Přiřazuje okraj podle místa dostupného po změně velikosti obrazovky okna. Například nastaví margin-left a right na auto a vlastnost display je nastavena na block:
img {
displej: blok;
okraj-levý: auto;
pravý okraj: auto;
}
Po provedení výše uvedeného příkladu vypadá webová stránka takto:
Výše uvedený výstup ukázal, že obrázek je nyní uprostřed.
Použití modulu Flexbox
' flexbox ” je modul, který obsahuje kompletní sadu vlastností. V našem případě vyberte třídu kořenového prvku a použijte flex jako hodnotu vlastnosti display. Nastavte střed jako hodnotu pro „ ospravedlnit-obsah ' a ' zarovnat-položky vlastnosti:
.vykořenit {displej: flex;
ospravedlnit- obsah : střed;
align-items: center;
Pozadí- barva : modrá;
}
Webová stránka po provedení kódu vypadá takto:
Výše uvedený výstup ukazuje, že obrázek je zobrazen ve středu prvku div s barvou pozadí nastavenou na „modrou“.
Použití modulu rozvržení zobrazení mřížky
Rozvržení zobrazení mřížky má 12 sloupců a celková šířka je nastavena na 100 % a každý prvek umístí na konkrétní pozici na webové stránce:
.vykořenit {displej: mřížka;
místo-položky: centrum;
}
Ve výše uvedeném fragmentu kódu je vlastnost display přiřazena hodnota „grid“. Zatímco „place-item“ se používá jako zkratka pro vlastnosti „justify-content“ a „align-items“:
Výstup ověřuje, že je obrázek uprostřed prvku div pomocí metody mřížky:
Použití atributu pozice
Nastavením pozice kořenové třídy na relativní hodnotu a třídy obrázku na absolutní hodnotu. Obrázek lze zobrazit ve středu div:
.vykořenit {poloha: relativní;
}
.obraz {
šířka : 700px;
výška : 500px;
pozice: absolutní;
vlevo, odjet: padesáti %;
transformovat: translateX ( - padesáti % ) ;
}
Obrázek se přesune doleva od „50 %“ a poté se na ose X transformuje zpět na „-50 %“. Zobrazuje obrázek ve středu div vodorovně:
To je způsob, jakým lze obrázek vycentrovat vodorovně.
Závěr
Chcete-li vodorovně nastavit obrázek v prvku div, použijte „ okraj “, “ flex modul “, “ Rozvržení mřížky ' a ' pozice vlastnosti. ' okraj ” vlastnost left a right je nastavena na auto. Modul „flex modul“ a „rozvržení mřížky“ nastaví displej na ohyb a mřížku a použijí „ umístit položku “ vlastnost pro vycentrování obrazu. Vlastnost position nastavuje hodnotu relativní ke kořenové třídě a absolutní ke třídě obrázku a používá vlastnosti „left“ a „transform“. Tento blog úspěšně demonstroval, jak horizontálně vycentrovat obrázky v divu.