CSS segítségével központtól képek és más objektumok html, css

A CSS a legjobb módja a központtól a képeket, szöveget blokkokat, és még az egész weblap design. A legtöbb tulajdonságainak HTML align elérhetővé vált a CSS. kezdve 1.0 verzió. Ők nagyon jól működik a CSS3 és a modern böngészők:







CSS segítségével központtól képek és más objektumok html, css

CSS segítségével a központtól a HTML

Központosító CSS ​​probléma lehet a kezdő webes tervezők. Számos módja van, hogy ezt, de nem mindegyik alkalmazható minden elemet.

CSS lehet használni:
  • Középre a szöveget;
  • Középre a blokk elem (például, div);
  • Középre a képet;
  • Függőleges központosító egységet, vagy képet.

Sok évvel ezelőtt, web tervezők használhatják

összehangolni képeket és szöveget. De most ez a címke elavult, és nem támogatja a modern böngészők. Ez annak a ténynek köszönhető, hogy a modern weboldalak kell, hogy egyértelmű szétválasztása szerkezete és stílusa.

Tippek központosító CSS

HTML létrehozásához használt szerkezetet, és meghatározza a CSS stílusokat. Mivel központosító - vizuális jellemző, azt végzik segítségével lépcsőzetes stíluslapok.

Központosítás szöveg CSS

A legegyszerűbb módja, hogy összehangolják a szöveget egy weblapon. Ehhez szükség van csak egy tulajdonság: HTML szöveget align:

Ezzel a kódsor minden bekezdés az osztály központ lesz vízszintesen középre belül a szülő.







Alkalmazások E osztály:

A beállítás szöveg középre tulajdonságokat text-align emlékezni, hogy középre elrendezéséről, és adott esetben tekintetében az egész oldalt.

Központosító tartalmi egységek CSS segítségével

A blokkok bármilyen elemek az oldalon, amelyek meghatározott, mint egy blokk szintű elemeket, és van egy előre meghatározott szélességű. Gyakran az ilyen egységek létre a

.

A leggyakoribb módszer a központosító elemek - be van állítva a bal és a jobb margó auto: a

Ez rövidített formája margin tulajdonságok megállapításához az alsó és felső behúzás 0 értékre, a bal és a jobb margó fogja használni az automatikus értéket. Így részt az összes rendelkezésre álló helyet, és egyenlő arányban oszlik meg a két fél között, ami megfelel a HTML div align.

Alkalmazás HTML:

Mivel az egység egy bizonyos szélessége, akkor belül, középen tartalmazó elem. A szöveg, ami ebben a blokkban lesz igazítva off-center, és távozott. Mivel a böngésző alapértelmezés szerint a szöveg balra. Ahhoz, hogy a szöveg a középre, használja tulajdonát text-align. amit korábban leírtuk.

Központosítás képek CSS

A legtöbb böngésző megjeleníti a képeket középre a tulajdonságok használatával a HTML szöveg igazítása. De nem hivatkozhat ezt a módszert, mert nem ajánlott a W3C.

Ehelyett kifejezetten meg kell mondani a böngészőnek, hogy a kép a blokk szintű elemet. Itt látható a CSS kódot, hogy:

Itt a HTML kód a kép középre:

Azt is beállíthatja objektumokat a beépített CSS:

Függőleges igazítás elemek a CSS

HTML függőleges igazítás mindig problematikus volt web design, de a kiadás a leírás CSS Flexible Box Layout Module CSS3. volt egy megoldást erre a problémára.

A függőleges elrendezés működik, valamint a horizontális, a fent leírtak szerint. Vertical-align tulajdonság, amelynek értéke középen:

A hátránya ennek a módszernek, hogy nem minden böngésző támogatja a CSS flexbox. Ha probléma van a régebbi böngészők, a W3C nem javasolja, hogy a szöveget függőlegesre a tartályban, a következő módszerrel:
  • Helyezzük a elemek, amelyeket meg kell középre, a tartály belsejében elem, mint például egy div;
  • Minimális magasság beállítása tartalmazó elem;
  • Állapítsa konténer elem;
  • Állítsa HTML függőleges align érték közepén.

Függőleges központosító és korábbi verziói az Internet Explorer

Fordítása a cikk «használat CSS Center Képek és egyéb HTML tárgyak» készítettünk egy csapat barátságos Web design projekt tól Z-ig