Ako horizontálne a vertikálne zarovnať pomocou CSS?

Ako Horizontalne A Vertikalne Zarovnat Pomocou Css



' Horizontálne zarovnanie ” zarovná prvky HTML na os X, t. j. vľavo, vpravo alebo na stred v rámci nadradeného prvku. Na druhej strane, „ Vertikálne zarovnanie ” zarovná prvok pozdĺž osi Y, čo môže byť mimoriadne užitočné pri centrovaní obsahu v sekcii alebo pri zarovnávaní prvkov s rôznymi výškami. Pomáhajú vytvárať vlastné a jednotné usporiadanie a zlepšujú čitateľnosť obsahu.

Táto príručka ukazuje postup horizontálneho a vertikálneho zarovnania pomocou CSS.

Ako horizontálne a vertikálne zarovnať pomocou CSS?

Vývojári používajú „horizontálne“ a „vertikálne“ zarovnanie na usporiadanie a umiestnenie prvkov na webovej stránke organizovanejším spôsobom. Môžu byť užitočné pri zarovnávaní prvkov a obsahu, umiestňovaní tlačidiel alebo ikon atď. Pre lepšie pochopenie postupujte podľa nasledujúcich príkladov:





Horizontálne zarovnanie

V CSS sa vlastnosť text-align používa na horizontálne zarovnanie textu v rámci nadradeného prvku. Pre lepšie pochopenie navštívte nižšie uvedené úryvky kódu:



< telo >
< div trieda = 'účet' >
< div trieda = 'zarovnať doľava' > Linuxhint je zarovnanie doľava < / div >
< div trieda = 'zarovnanie na stred' > Linuxhint je Center Align < / div >
< div trieda = 'rightAlign' > Linuxhint je Right Align < / div >
< / div >
< / telo >

Vo vyššie uvedenom útržku kódu:



  • Po prvé, rodič' div ” prvok sa používa s atribútom class s hodnotou “ účtu “.
  • Ďalej boli vytvorené tri podradené prvky a každému divu bol priradený atribút class.
  • Nakoniec sa triedam poskytnú hodnoty „leftAlign“, „centerAlign“ a „rightAlign“.

Teraz vložte nasledujúce vlastnosti CSS do „