Hasznos tippek

A html kép középpontba állításának három módja

Pin
Send
Share
Send
Send


A CSS használata a legoptimálisabb módszer a képek, szövegblokkok és akár a teljes weboldal tervezésének központosítására. A HTML illesztés legtöbb tulajdonsága az 1.0 verzió óta elérhető a CSS-ben. Nagyon jól működnek a CSS3-val és a modern böngészőkkel:

CSS központosító alkalmazások HTML-ben

A CSS központosítása problémát jelenthet a kezdő webes tervezők számára. Ennek számos módja van, de nem mindegyik vonatkozik minden elemre.

A CSS felhasználható:

  • Középpontban a szöveg
  • Középpontba állít egy blokk elemet (pl. Div)
  • Középső kép
  • Középre állítsa a blokkot vagy a képet függőlegesen.

A webdesigner sok évvel ezelőtt felhasználhatta a képek és a szövegek központosítását. De ez a címke elavult, és a modern böngészők már nem támogatják. Ennek oka az a tény, hogy a modern oldalaknak egyértelműen el kell választaniuk a szerkezetet és a stílusokat.

CSS szövegközpontosítás

A szöveg legegyszerűbb módja a weboldalba történő központosításra. Ehhez csak egy tulajdonságra van szüksége: HTML szöveg igazítása:

Ezzel a kódsorral a középkategóriával rendelkező bekezdések vízszintesen központosulnak a szülő elemben.

Ennek az osztálynak az alkalmazásai:

Ha a szöveg középpontjában a szöveg-igazítási tulajdonsággal igazítja be, ne felejtse el, hogy a szöveg a tárolót tartalmazó közepén helyezkedik el, és nem feltétlenül az egész oldalra vonatkoztatva.

Központi tartalomblokkok CSS használatával

Blokkok bármely olyan elem az oldalon, amely blokk szintű elemként van beállítva és egy bizonyos szélességgel rendelkezik. Az ilyen blokkokat gyakran a

A középső blokkok leggyakoribb módja az, hogy a bal és a jobb oldali betétet automatikusra állítsa:

A margó tulajdonság rövidített formája a felső és az alsó margót 0-ra állítja, a bal és a jobb margó automatikusan használható. Így az összes rendelkezésre álló hely el van foglalva és egyenletesen oszlik meg a két oldal között, ami egyenértékű a HTML div igazítással.

HTML alkalmazás:

Mivel a blokknak van egy bizonyos szélessége, a középpontjában az azt tartalmazó elem belsejében kell lennie. Ebben a blokkban a szöveg nem igazodik a középponthoz, hanem balra. Mivel alapértelmezés szerint a böngészőkben a szöveg balra igazítva van. A szöveg középpontjában tartása érdekében használja a korábban leírt szöveg-igazítási tulajdonságot.

CSS Image Centering

A legtöbb böngésző a középpontban jeleníti meg a képeket, amikor a HTML szöveg igazítási tulajdonságát használja. De nem szabad támaszkodnia erre a módszerre, mivel a W3C nem ajánlja azt.

Ehelyett kifejezetten el kell mondania a böngészőjének, hogy a kép blokk szintű elem. Itt található a CSS kód erre:

Itt található a középpontba helyezett kép HTML kódja:

Az objektumokat központosíthatja az inline CSS használatával is:

Középpontban az elemek függőlegesen a CSS-sel

A HTML függőleges igazítása mindig problematikus volt a webdesignban, ám a CSS Flexible Box Layout Module specifikációjának a CSS3 kiadásával kiadott megoldást erre a feladatra.

A függőleges igazítás ugyanúgy működik, mint a fent leírt vízszintes igazítás. Függőleges igazítás tulajdonság középértékkel:

Ennek a megközelítésnek az a hátránya, hogy nem minden böngésző támogatja a CSS FlexBox-ot. Ha problémák merülnek fel a böngészők korábbi verzióival, a W3C azt javasolja, hogy a szöveget függőlegesen központosítsák a tárolóba a következő módszerrel:

  • Helyezze a központosítani kívánt elemeket egy konténer elembe, például egy div,
  • Állítsa be a tárolóelem minimális magasságát,
  • Nyisson meg egy tárolóelemet,
  • Állítsa a HTML függőleges igazítását középre.

Az Internet Explorer függőleges központosítása és korábbi verziói

Számos módja van arra, hogy az IE-t objektumok központosítására, majd feltételes megjegyzések használatára kényszerítse. A jó hír az, hogy a Microsoft nemrégiben hozott döntése miatt, amelyben elhagyja az IE régebbi verzióinak támogatását, ezeknek a böngészőknek hamarosan eltűnniük kell, így a webtervezők könnyebben használhatják a modern jelölési megközelítéseket, mint például a CSS FlexBox.

Ez a kiadvány az „Internet Technology.ru” projekt barátságos csapata által készített, „A CSS használata a képek és más HTML objektumok központosításához” című cikk fordítása.

Pin
Send
Share
Send
Send