Tento článek ukazuje správné zarovnání prvku div s praktickými příklady pomocí CSS.
- Jak správně zarovnat div pomocí CSS?
- Použití vlastnosti „float“.
- Použití „správné“ vlastnosti
- Použití Flex Layout
- Použití rozložení mřížky
Jak správně zarovnat div pomocí CSS?
Vývojář může správně zarovnat každý prvek div nebo obrázek tak, aby byl web atraktivnější. Vzhledem k jejich vysoké flexibilitě lze prvky div na webové stránce využít několika způsoby, jako je definování sekcí stránky, vytváření sloupců a zalamování sad souvisejícího obsahu.
Pro zarovnání divu doprava postupujte podle následujících metod:
Metoda 1: Použití vlastnosti „float“.
V souboru HTML vytvořte div a přiřaďte mu třídu „ zarovnat doprava “. Tato třída a div se používají v celém tomto článku.
< div třída = 'zarovnat doprava' >
< p > Toto je nějaký obsah. < / p >
< / div >
Nyní vyberte třídu div ' zarovnat doprava ” a přiřaďte vlastnosti CSS. Tyto vlastnosti se využívají pro lepší vizualizaci:
.zarovnat-doprava {
plovák: pravý;
odsazení: 10px;
Pozadí- barva : hotpink;
}
Ve výše uvedeném kódu je „ plovák ” vlastnost nastavena vpravo. Vznáší se nebo posouvá div na webové stránce správným směrem. Vlastnosti odsazení a barvy pozadí jsou nastaveny na „ 10 pixelů ' a ' hotpink “.
Po kompilaci výše uvedeného fragmentu kódu vypadá webová stránka takto:
Výše uvedený výstup potvrzuje, že se div pohybuje správným směrem.
Metoda 2: Použití „správné“ vlastnosti
V CSS vyberte třídu div a nastavte „ že jo ” vlastnost na 0. Zajišťuje, že vzdálenost vybraného divu od pravé strany je rovna nule. Poté nastavte „ pozice „vlastnost na“ absolutní “, aby byla pozice div pevná. Nakonec použijte některé vlastnosti stylu pro lepší vizualizaci:
.zarovnat-doprava{
že jo: 0 ;
pozice: absolutní;
odsazení: 10px;
Pozadí- barva : středně fialová;
}
Po spuštění kódu webová stránka vypadá takto:
Výstup ukazuje, že div je nyní zarovnán doprava.
Metoda 3: Použití Flex Layout
Flex je nejúčinnější metoda a zachovává rozložení během změny velikosti okna. Div lze zarovnat doprava pomocí CSS “ Rozložení Flex vlastnosti. Rozvržení Flex obsahuje mnoho vlastností pro různé účely.
V souboru HTML vytvořte nadřazený div a uvnitř vytvoří dva sourozenecké divy. Také přiřaďte každému divu jedinečnou třídu:
< div třída = 'zarovnat doprava' >< div třída = 'zarovnáno doleva' >
< p > Tohle je něco víc obsah .< / p >
< / div >
< div třída = 'zarovnáno vpravo' >
< h1 >Ahoj z Linuxhint < / h1 >
< / div >
< / div >
Nyní uvnitř „
displej: flex;
ospravedlnit- obsah : mezera-mezi;
}
.zarovnáno vpravo {
align-self: flex-end;
odsazení: 10px;
Pozadí- barva : středně fialová;
}
Ve výše uvedeném kódu
- Přiřadit ' flex “ a „mezera-mezi“ k hodnotám „ Zobrazit ' a ' ospravedlnit-obsah “ vlastnosti, resp. Díky těmto vlastnostem je prvek div ohebný a mezi podřízené prvky div jsou stejné.
- ' zarovnat se “ vlastnost je nastavena na “ ohebný konec “, což způsobí, že se zarovná na pravou stranu kontejneru.
Po provedení výše uvedeného kódu webová stránka vypadá takto:
Výstup ukazuje, že prvek div je zarovnán doprava pomocí rozvržení Flex.
Metoda 4: Použití rozložení mřížky
Rozvržení mřížky lze také použít k zarovnání divu vpravo. Struktura kódu HTML zůstává stejná:
.zarovnat-doprava {displej: mřížka;
mřížka-šablona-sloupce: opakujte ( 2 , 1fr ) ;
}
.zarovnáno vpravo {
mřížka-sloupec- Start : 2 ;
odsazení: 10px;
Pozadí- barva : modrozelená;
}
Popis kódu je uveden níže:
- Nejprve vyberte nadřazenou třídu div “ .zarovnat-doprava “ a nastavte jeho „ Zobrazit „vlastnost na“ mřížka “.
- Poté vytvořte dva sloupce stejné velikosti pomocí „ mřížka-šablona-sloupce ' nastaven na ' opakovat (2, 1fr) “.
- Nakonec vyberte podřízenou třídu div “ .zarovnáno vpravo “ a nastavte „ mřížka-sloupec-start ” vlastnost na 2. Tato vlastnost začíná prvek od druhého sloupce, tj. z pravé strany.
Po provedení výše uvedeného kódu vypadá webová stránka takto:
Výstup ukazuje, že div je nyní zarovnán doprava pomocí „ mřížka vlastnosti rozložení.
Závěr
Chcete-li zarovnat div správným směrem, použijte „ plovák “, “ že jo “, “ flexibilní rozložení ', a ' Rozvržení mřížky vlastnosti. ' plovák “ vlastnost se nastaví doprava přiřazením hodnoty “ 0px “. Pro ' flex “, nastavte displej na ohyb a použijte „ zarovnat se „vlastnost na“ ohebný konec “. Pomocí vlastnosti grid vytvořte dva sloupce stejné velikosti a nastavte, aby podřízený prvek div začínal od druhého sloupce.