Egy reszponzív webhely módosíthatja a képernyő méretét és az eszköz méreteit, amelyben megtekintik. A weboldal reszponzivitása mellett az is szükséges, hogy a képek és a szöveg egymáshoz igazodjanak és reszponzívak legyenek. Az igazított képek azok, amelyek köréjük fonják a szöveget. Míg az igazított szöveg az, amely úgy néz ki, mint egy egész bekezdés.
Ez a cikk a képek és szövegek adaptív igazításának módszerét vizsgálja.
Hogyan lehet a képeket és a szöveget érzékenyen igazítani?
A tartalom, beleértve a képeket és a szöveget, a Bootstrap használatával érzékenyen igazítható. A demonstrációhoz két példát soroltunk fel:
- Igazítsa középre a szöveget függőlegesen és a képet vízszintesen.
- Igazítsa balra a szöveget és a reszponzív képet.
1. példa: Középre igazítsa a szöveget függőlegesen és a képet vízszintesen
Először próbálja meg középre igazítani a képet vízszintesen, a szöveget pedig függőlegesen. Ebből a célból kövesse az alábbi utasításokat:
1. lépés: Hozzon létre egy HTML-struktúrát
A HTML-struktúra létrehozásakor először csatolja a „ Bootstrap ” és a külső CSS-fájlt is. Ezt követően hozzon létre a 2. lépés: Alkalmazza a CSS-t A konténeren: Tovább A szövegben: Megfigyelhető, hogy a szöveg függőlegesen, a kép pedig vízszintesen van középen: 2. példa: Balra igazítsa a szöveget és a reszponzív képet Ebben a példában a kép és a szöveg balra lesz igazítva. Ebből a célból kövesse az alábbi lépésenkénti utasításokat: 1. lépés: Hozzon létre egy HTML-struktúrát A HTML kód ugyanaz, mint fent, a példában használt. 2. lépés: Alkalmazza a CSS-t A konténeren: Tovább A szövegben: A kimenet megerősíti, hogy a szöveg és a kép balra van igazítva: A képek és a szöveg adaptív igazításához először hozzon létre egy rácsot vagy egy rugalmas elrendezést a CSS-ben, majd állítsa be a „ align-elem ' ingatlan értéke a ' központ ”. Ezzel a CSS-ben adaptívan igazítja a képeket és a szöveget. Ez az írás teljes útmutatót adott a felhasználóknak a képek és a szöveg érzékeny igazításához. címke és szöveg:
< test >
< div osztály = 'tartály' >
< img src = 'teszt-kép.jpg' minden = 'tesztkép' >
< div osztály = 'szöveg' > Ez egy kis szöveg. div >
div >
test >
:
.tartály {
kijelző: Flex ;
szöveg igazítása: középre;
indokol-tartalom: center;
align-ites: center;
}
img {
maximális szélesség: 100 % ;
magasság: auto;
}
.szöveg {
betűméret: 16 képpont;
maximális szélesség: 390 képpont;
}
:
.tartály {
kijelző: Flex ;
hajlítási irány: oszlop;
align-items: flex-start;
szöveg igazítása: balra;
}
img {
maximális szélesség: 100 % ;
magasság: auto;
}
.szöveg {
betűméret: 16 képpont;
maximális szélesség: 390 képpont;
}
Következtetés