Ako správne zarovnať div pomocou CSS?

Ako Spravne Zarovnat Div Pomocou Css



Vyváženie obsahu je hlavnou súčasťou webovej stránky, ktorá môže zvýšiť a znížiť zameranie a záujem používateľa. V HTML sa prvok div používa na zoskupenie niekoľkých prvkov a umožňuje CSS aplikovať vlastnosti na všetky prítomné prvky naraz. Vývojár môže zobrazovať obsah lepším spôsobom bez zníženia používateľského zážitku pomocou zarovnania doprava a doľava.

Tento článok demonštruje správne zarovnanie prvku div s praktickými príkladmi pomocou CSS.

Ako správne zarovnať div pomocou CSS?

Vývojár môže správne zarovnať každý prvok div alebo obrázok tak, aby bol web príťažlivejší. Vďaka svojej vysokej flexibilite možno prvky div na webovej stránke využiť niekoľkými spôsobmi, ako je napríklad definovanie sekcií stránky, vytváranie stĺpcov a zalamovanie sád súvisiaceho obsahu.





Na zarovnanie divu doprava postupujte podľa nasledujúcich metód:



Metóda 1: Použitie vlastnosti „float“.

V súbore HTML vytvorte div a priraďte mu triedu „ zarovnať doprava “. Táto trieda a div sa používajú v celom tomto článku.



< div trieda = 'zarovnať doprava' >
< p > Toto je nejaký obsah. < / p >
< / div >

Teraz vyberte triedu div “ zarovnať doprava “ a priraďte vlastnosti CSS. Pre lepšiu vizualizáciu sa využívajú tieto vlastnosti:



.zarovnanie doprava {
plavák: pravý;
výplň: 10px;
pozadie- farba : hotpink;
}

Vo vyššie uvedenom kóde je „ plavák ” vlastnosť je nastavená vpravo. Vznáša alebo posúva div na webovej stránke správnym smerom. Vlastnosti výplne a farby pozadia sú nastavené na „ 10 pixelov “ a „ hotpink “.

Po skompilovaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:



Vyššie uvedený výstup potvrdzuje, že div sa pohybuje správnym smerom.

Metóda 2: Použitie „správnej“ vlastnosti

V CSS vyberte triedu div a nastavte „ správny ” vlastnosť na 0. Zabezpečuje, že vzdialenosť vybratého divu od pravej strany je rovná nule. Potom nastavte „ pozíciu “vlastnosť na “ absolútne “, aby sa poloha div zafixovala. Nakoniec použite niektoré vlastnosti štýlu pre lepšiu vizualizáciu:

.zarovnanie doprava
{
správny: 0 ;
pozícia: absolútna;
výplň: 10px;
pozadie- farba : stredne fialová;
}

Po vykonaní kódu webová stránka vyzerá takto:

Výstup ukazuje, že div je teraz zarovnaný doprava.

Metóda 3: Použitie Flex Layout

Flex je najefektívnejšia metóda a zachováva rozloženie pri zmene veľkosti okna. Div možno zarovnať doprava pomocou CSS “ Rozloženie Flex vlastnosti. Rozloženie Flex obsahuje mnoho vlastností na rôzne účely.

V súbore HTML vytvorte rodičovský div a vo vnútri vytvorí dva súrodenecké divy. Tiež priraďte každému divu jedinečnú triedu:

< div trieda = 'zarovnať doprava' >
< div trieda = 'zarovnané doľava' >
< p > Toto je niečo viac obsahu .< / p >
< / div >
< div trieda = 'zarovnané vpravo' >
< h1 >Ahoj z Linuxhint < / h1 >
< / div >
< / div >

Teraz vnútri „