Ez az útmutató bemutatja a vízszintes és függőleges igazítási eljárást CSS használatával.
Hogyan lehet vízszintesen és függőlegesen igazítani a CSS segítségével?
A fejlesztők a „vízszintes” és „függőleges” igazítást használják az elemek rendezettebb elrendezésére és elhelyezésére a weboldalon. Hasznosak lehetnek az elemek és a tartalom igazításában, a gombok vagy ikonok elhelyezésében stb. Kövesse az alábbi példákat a jobb megértés érdekében:
Vízszintes igazítás
A CSS-ben a text-align tulajdonság a szöveg vízszintes igazítására szolgál a szülőelemen belül. Tekintse meg az alábbi kódrészleteket a jobb megértés érdekében:
< test >
< div osztály = 'számla' >
< div osztály = 'balra igazítás' > A Linuxhint balra igazítás < / div >
< div osztály = 'centerAlign' > A Linuxhint a Center Align < / div >
< div osztály = 'jobbra igazítás' > A Linuxhint a Right Align < / div >
< / div >
< / test >
A fenti kódrészletben:
- Először is a szülő div ' elemet egy osztály attribútummal használják, amelynek értéke ' fiókot ”.
- Ezután három gyermekelemet hoztak létre, és minden div-hez hozzárendelték a class attribútumot.
- Végül a „leftAlign”, „centerAlign” és „rightAlign” értékeket biztosítjuk az osztályoknak.
Most illessze be a következő CSS-tulajdonságokat a '
.leftAlign {
kijelző : inline-blokk ;
szélesség : 30% ;
párnázás : 20 képpont ;
háttérszín : erdő zöld ;
szöveg igazítás : bal ;
}
.centerAlign {
kijelző : inline-blokk ;
szélesség : 30% ;
háttérszín : piros ;
párnázás : 20 képpont ;
szöveg igazítás : központ ;
}
.jobbraIgazítás {
kijelző : inline-blokk ;
szélesség : 30% ;
háttérszín : a zöldeskék ;
párnázás : 20 képpont ;
szöveg igazítás : jobb ;
}
>
A fenti kódblokkban:
- Először mindhárom osztályt külön választja ki, majd alkalmazza a CSS-tulajdonságokat. kijelző ”, „ szélesség ”, „ háttérszín ” és „ párnázás ' nekik. Ezeket a tulajdonságokat a vizualizációs célok javítására használják.
- Ezután a „ bal ”, „ központ ” és „ jobb ' biztosítják a ' szöveg igazítás ' ingatlan a ' leftAlign ”, „ centerAlign ”, és „ rightAlign ” osztályok, ill.
A fordítási folyamat után a HTML elemek így néznek ki:
A böngésző fenti pillanatképe azt mutatja, hogy az elemek vízszintesen vannak elrendezve balra, középre és jobbra.
Függőleges igazítás
A CSS' függőleges igazítás ” tulajdonság a kiválasztott elemet a „ y tengely ” a szülőelemükön belül. A „függőleges igazítás” tulajdonság lehetséges értékei: „ alapvonal ”, „ alatti ”, „ szuper ”, „ tetejére ”, „ text-top ”, „ középső ”, „ alsó ”, és „ szöveg-alsó ”. A fejlesztők azonban többnyire a „top”, „middle” és „bottom” értékeket használják a weboldalak tervezése során. A kiválasztott HTML-elem legfelső pozíciójához igazításához látogassa meg az alábbi kódrészletet:
< div osztály = 'számol' >< img src = 'hiunsplash.jpg' szélesség = '200px' magasság = '200px' >
< span osztály = 'captionTopAlign' > Ez a szöveg a kép mellett függőlegesen felül van igazítva < / span >
< / div >
A fenti kódrészletben:
- Először hozzon létre egy szülőt ' div ' elemet, és adjon hozzá egy értéket számol ' hoz ' osztály ' tulajdonság.
- A szülőtárolón belül használja a „
' címkét, és adja meg a kép elérési útját értékeként a ' src ' tulajdonság.
- Ezenkívül adja meg a „ 200 képpont 'mind a ' szélesség ” és „ magasság ' attribútumai a '
” címke.
- Ezután használja a „ ' címkét, és adjon meg egy '' osztályt captionTopAlign ”. Végül adjon meg hamis adatokat.
Most adjon hozzá CSS-tulajdonságokat a HTML-elemek stílusához:
.számol {szélesség : fit-tartalom ;
kijelző : Blokk ;
margó-bal : 100 képpont ;
párnázás : 10 képpont ;
határ : 2px szilárd piros ;
}
.captionTopAlign {
függőleges
A fenti kódblokkban:
- Először válassza ki a szülőt ' számol ” osztályba, és adja meg a „fit-content”, „block”, „100px”, „10px” és „2px solid red” értékeket a CSS-ben „ szélesség ”, „ kijelző ”, „ margó-bal ”, „ párnázás ” és „ határ ” tulajdonságait. Ezek a tulajdonságok a szülőelem stílusának meghatározására szolgálnak.
- Ezután válassza ki a „ captionTopAlign ' osztály, és adja meg a ' tetejére 'a CSS-hez' függőleges igazítás ' ingatlan. Ezáltal a HTML elem a legfelső pozícióhoz igazodik.
A fenti kódsorok végrehajtása után a weboldal így néz ki:
A fenti pillanatkép azt mutatja, hogy a kiválasztott HTML-elem most felül van igazítva. Ugyanígy az elem igazítható középre, alulra stb.
Következtetés
Vízszintes és függőleges igazításhoz a „ szöveg igazítás ” és „ függőleges igazítás ” CSS tulajdonságokat használnak, ill. A 'text-align' tulajdonság lehetővé teszi a ' bal ”, „ jobb ”, „ központ ” és „ igazolni ”. Másrészt a „függőleges igazítás” tulajdonság lehetséges értékei: „ alapvonal ”, „ alatti ”, „ szuper ”, „ tetejére ”, „ text-top ”, „ középső ”, „ alsó ”, és „ szöveg-alsó ”. A vízszintes és függőleges igazítás segít letisztult és professzionális webtervek létrehozásában.