Középső képeket, szövegeket és blokk elemeket hozhat létre webhelyek építése során
Ha megtanulod, hogyan készítsek weboldalakat , az egyik leggyakrabban használt trükk, amire szükséged lesz a mester, az, hogyan kell központosítani az elemeket a böngészőablakban. Ez azt jelentheti, hogy egy oldalt a kép középpontba állít, vagy a terv részeként középre igazolhatja a szöveges címeket.
A CSS (Cascading Style Sheets, CSS) használatával a centrált képek vagy szöveg, vagy akár a teljes weboldal vizuális megjelenítésének megfelelő módja. A központosítás legtöbb tulajdonsága az 1.0-s verzió óta szerepel a CSS-ben, és jól működik a CSS3 és a modern web böngészők között .
A webdesign sok szempontjához hasonlóan számos lehetőség van arra, hogy a CSS-t a weboldal középső elemeihez használják. Vessünk egy pillantást a CSS különböző módjaira a vizuális megjelenés elérése érdekében.
A CSS elemeinek áttekintéséről a HTML elemek középső elemeihez című témakörben
A CSS központosítása kihívást jelenthet a webes tervezők megkezdéséhez, mivel annyi különböző módja van ennek az egyik vizuális stílusnak a megvalósításában. Bár a különböző módszerek lehetnek szép vagy tapasztalt webes fejlesztők, akik tudják, hogy nem minden technika dolgozik minden elemen, ez szörnyen kihívást jelenthet az újabb webes szakemberek számára, mivel a módszerek széles skálája azt jelenti, hogy tudniuk kell, mikor kell használni ezt a megközelítést. A legjobb dolog az, hogy megértsük néhány megközelítést. Amint elkezdi használni őket, megtudhatja, melyik módszer működik a legjobban, mely esetekben.
Magas szinten a CSS segítségével:
- Központ szövege
- Egy blokkszintű elem központja (mint egy megosztottság)
- A kép középpontja
- Függőlegesen egy blokkot vagy egy képet középre helyez
Sok (sok) évvel ezelőtt a webes tervezők a
Központosító szöveg CSS-sel
A weboldal legegyszerűbb módja a szöveg. Csak egy olyan tulajdonság van, amelyet meg kell tudnia tenni: text-align. Vegye figyelembe a CSS stílusát, például:
p.center {text-align: center; }
Ezzel a CSS sorral minden bekezdés, amelyet a középosztályba írtak, vízszintesen a szülőelemen belül helyezkedik el. Például, ha a bekezdés egy megosztottságon belül van, vagyis ez a megosztottságnak a gyermeke, akkor vízszintesen a
Íme egy példa erre az osztályra a HTML dokumentumban:
Ez a szöveg középre van állítva.
Ha a szöveget a text-align tulajdonsággal központosítja, ne feledje, hogy az a tartalmi elem középpontjában áll, és nem feltétlenül a teljes oldalra koncentrálódik. Ne felejtsük el, hogy a közepesen indokolt szöveg nehezen olvasható nagy tartalomblokkok esetén, ezért használd ezt a stílust takarékosan. A címsorok és a kis szövegtömbök, mint a cikkek vagy más tartalmak teaser szövege, gyakran könnyen olvasható és finom, amikor központosított, de nagyobb szövegtömbök, mint a teljes cikk, maguk is kihívást jelentenek, ha a tartalom teljes mértékben indokolt. Ne feledje, olvashatóság mindig kulcsfontosságú, amikor a honlap szövegét!
Központosító tartalomblokkok CSS-vel
A blokkok olyan oldalelemek, amelyek meghatározott szélességűek és blokkszintű elemként vannak létrehozva. Gyakran előfordul, hogy ezeket a blokkokat a HTML
div.center {
margin: 0 auto;
szélesség: 80em;
}
Ez a CSS rövidítése a margin tulajdonsághoz a felső és az alsó margókat 0-ra állította, míg a bal és a jobb oldali "automatikus" értéket használta. Ez lényegében minden rendelkezésre álló helyet foglal el, és egyenletesen oszlik el a nézetablak két oldala között, hatékonyan központosítva az elemet az oldalra.
Itt alkalmazzák a HTML-ben:
de a benne lévő szöveg balra igazítva van.
Mindaddig, amíg a blokknak meghatározott szélessége van, a középpontba kerül a tartalmi elemen belül. A blokkban lévő szöveg nem lesz középpontba helyezve, de balra igazolható. Ez azért van, mert a szöveg a böngészők alapértelmezés szerint balra igazolható. Ha azt szeretné, hogy a szöveg is középre legyen állítva, használhatja a korábban lefedett szöveges igazítás tulajdonságát ezzel a módszerrel a megosztás központosításához.
Képek központosítása a CSS segítségével
Míg a legtöbb böngésző olyan képeket jelenít meg, melyeket a szöveg-igazítás tulajdonságaival központosítva már megnéztük a bekezdést, nem célszerű támaszkodni erre a technikára, mivel a W3C nem ajánlja. Mivel nem ajánlott, mindig van esély arra, hogy a böngészők jövőbeli verziói eldönthessék, hogy figyelmen kívül hagyják ezt a módszert.
Ahelyett, hogy a szöveg középre igazítaná a kép közepét, explicit módon meg kell mondania a böngészőnek, hogy a kép blokk szintű elem. Így központosítani tudja azt, mint bármely más blokkot. Itt van a CSS, hogy ez megtörténjen:
img.center {
kijelző: blokk;
margin-left: automatikus;
margin-right: automatikus;
}
És itt van a HTML a képhez, amelyet szeretnénk középpontba állítani:
Az objektumokat az in-line CSS használatával is központosíthatja (lásd alább), de ez a megközelítés NEM ajánlott, mivel vizuális stílusokat ad hozzá a HTML jelöléshez. Ne felejtsük el, hogy a stílust és a struktúrát elkülönítsük, így a CSS stílusok hozzáadását a HTML kódjához úgy hozzuk létre, hogy szétválasszuk a szétválasztást, és mint ilyen, akkor kerülni kell, amikor csak lehetséges.
Központosító elemek függőlegesen a CSS segítségével
A központosító objektumok függőlegesen mindig kihívást jelentettek a webes tervezésben, de a CSS3 CSS Flexible Box Layout Moduljának kiadásával most már van mód.
A függőleges igazítás a fent leírt vízszintes beállításhoz hasonlóan működik. A CSS tulajdonság vertikálisan igazodik a középértékhez.
.vcenter {
függőleges igazítás: középső;
}
Ennek a megközelítésnek a hátránya, hogy nem minden böngésző támogatja a CSS FlexBox-ot, bár egyre több és több az új CSS-elrendezési módszerhez. Valójában ma minden modern böngésző ma támogatja ezt a CSS-stílust. Ez azt jelenti, hogy az egyetlen aggálya a Flexbox-szal sokkal régebbi böngészőverzió.
Ha problémái vannak a régebbi böngészőknél, akkor a W3C azt javasolja, hogy a kontúrba vertikálisan helyezze el a szöveget a következő módszerrel:
- Helyezze el az elemeket, hogy középpontba kerüljenek egy tartal- mazó elem belsejében, például egy div.
- Állítsa be a minimális magasságot a tartalommal.
- Nyilatkozni arról, hogy elemet tartalmaz asztalcella formájában.
- Állítsa a függőleges igazítást a "közepes" értékre.
Itt például a CSS:
.vcenter {
min-magasság: 12em;
display: table-cell;
függőleges igazítás: középső;
}
És itt van a HTML:
Ez a szöveg függőlegesen középre esik a mezőben.
Függőleges központosítás és az Internet Explorer korábbi verziói
Vannak módszerek arra, hogy az Internet Explorer (IE) központot központosítsuk, majd feltételes megjegyzéseket használjunk, így csak az IE látja a stílusokat, de kicsit verbose és ronda. A jó hír az, hogy a Microsoft nemrégiben hozott döntése szerint az IE régebbi verzióihoz való támogatás visszavonására vonatkozó döntést, a nem támogató böngészőknek hamarosan ki kell menniük, így könnyebbé válik a webes tervezők számára, hogy olyan modern elrendezési megközelítéseket alkalmazzanak, mint a CSS FlexBox, nem csak központosítás, könnyebb minden webes tervező számára.