Jak vertikálně vycentrovat prvek div pro všechny prohlížeče pomocí CSS

Při vývoji webu je klíčové správně vytvořit rozložení prvku. Mnoho vlastností CSS, jako je například CSS3 Flexible Box, je však užitečné pro úpravu rozvržení webových stránek a prvků HTML. Flexibilní box se používá k uspořádání webových stránek a aplikací rekurzivním způsobem. Tento režim Flexbox pomáhá vytvářet rozvržení pro složité webové stránky a aplikace.

Tento příspěvek vás provede vertikálně vycentrováním prvku div pro všechny prohlížeče pomocí CSS.

Jak zarovnat prvek div pomocí CSS?

Element div lze svisle zarovnat pomocí vlastnosti display “ flex “ spolu s CSS “ zarovnat-položky 'majetek a' ospravedlnit-obsah ' vlastnictví. Vlastnost „align-items“ zarovná prvek vertikálně a vlastnost „justify-content“ zarovná obsah vodorovně.

Příklad: Jak vertikálně vycentrovat prvek div pomocí CSS?

V HTML nejprve přidejte „

prvek a přiřaďte mu třídu hlavní obsah “. Mezi značky „

“ přidejte „ ” prvek s následujícími atributy:

---

---

• “ src Atribut ” se používá k určení adresy URL obrázku.
• “ všechno Atribut ” definuje nějaký text, který se zobrazí místo obrázku, pokud se nepodaří načíst.
• “ šířka Atribut ” se používá k úpravě šířky obrázku.
• Poté přidejte „

  ” pro vložení odstavce na stránku.

Zde je HTML kód:

< div třída = 'hlavní obsah' >
< img src = '/images/laptop-notepad.jpg' všechno = 'Laptop s poznámkovým blokem a perem' šířka = '300' >
< p > Notebook je také známý přenosný počítač tak jako notebook. p >
div >

V CSS specifikujeme několik vlastností stylu div.

Styl „hlavní obsah“ Třída

.hlavní obsah {
výška: padesátka % ;
barva pozadí: #46C2CB;
velikost písma: 24px;
odsazení: 10px;
}

Následující vlastnosti CSS jsou definovány v „ hlavní obsah “třída:

• “ výška ” vlastnost se používá k úpravě výšky kontejneru
  .
• “ barva pozadí “ definuje barvu pozadí prvku.
• “ velikost písma “ určuje velikost písma prvku.
• “ vycpávka Vlastnost ” nastavuje prostor kolem obsahu prvku.

Z výstupu můžete pozorovat, že obsah prvku div není uprostřed:

Pokračujeme v aplikaci vlastností CSS, které pomáhají vycentrovat „

” prvek svisle. Přidejte tyto vlastnosti do třídy ' hlavní obsah ”, které se používají pro přístup k prvku

:

Zobrazit: flex ;
align-items: center;

Zde je popis:

• “ Zobrazit ' vlastnictví ' flex ” se používá k tomu, aby bylo rozložení div flexibilní vzhledem k jeho prvku.
• “ zarovnat-položky ' CSS vlastnost je nastavena jako ' centrum “, která svisle zarovná prvky div.

Výstup

Naučili jste se, jak vycentrovat prvek div svisle pro všechny prohlížeče pomocí CSS.

Závěr

Chcete-li prvek div svisle vycentrovat, použijte CSS „ Zobrazit 'nemovitost se používá s ' flex “hodnota. Díky této hodnotě je kontejner

flexibilní vůči jeho prvkům. Chcete-li svisle zarovnat prvek div, upravte „ zarovnat-položky vlastnost “ a přiřaďte jí “ centrum “hodnota. Tento blog vám ukázal, jak pomocí CSS vertikálně vycentrovat prvky div ve všech prohlížečích.