Sorba állításának módszerei képblokk, Vaden pro

Ezen az oldalon megtalálja a választ arra a kérdésre, hogy hogyan lehetséges, hogy a képet középre a blokkban. A bemutatott megoldás fogják elemezni és meg fogja vizsgálni az összes pozitív és negatív hatásait.

Szóval, ma fogunk összpontosítani, hogyan kell tájolni a képre, a közepén a blokk, mégpedig nemcsak a vízszintes tengely, hanem függőleges.

Hasonló probléma jelentkezik elég gyakran, például egy termék katalógus az online boltban. Lefektetett termék fotó, alább néhány információt, és hogy az egészet együtt nézd szalonképes és gyönyörű képek középre, tekintettel a wrapper. Az alábbiakban egy példát a valós gyakorlat

Leggyakrabban a telepítés képet az oldalon elvégzett helyszínen keresztül a felhasználó adminisztrátori felhasználói panel. Ez a lehetőség a legvalószínűbb, különösen azokban az esetekben, amikor a online áruházak. Admin lehetővé teszi, hogy képeket feltölteni az oldalra bármilyen méretű, és szinte bármilyen formátumban. És eredetileg előírt maximális mérete a blokk és a képeket. Így, a töltés után a kép lesz skálázva a kívánt méretet vagy vágás az extra fragmensek. Ha figyelembe vesszük az utolsó lehetőség lenne a legmegfelelőbb, ha a kép közepére kerül függőlegesen és vízszintesen.

klasszikus megoldás

A lényege a hagyományos megoldások cselekedni tulajdonságait text-align és vertical-align. Első pillantásra úgy tűnik, minden nagyon egyszerű és logikus, de ez nem így van.

Emlékszem, hogy a vertical-align tulajdonság csak akkor működik, a szöveges konténerek és táblázatcellákhoz. Ebből az következik, hogy szükségünk van proimitirovat állapotban a sejt számára egységet. Ennek segítségével display tulajdonság értékeket table-cell. Ez lehetővé teszi, hogy összehangolják a képre, a közepén a függőleges tengelyen. Vízszintes igazítás lehet elérni a text-align.

Jelentős probléma, és a nehéz ez a módszer abban a tényben rejlik, hogy mindenki kedvenc internetes Explower nem működnek megfelelően a table-cell értéket. Ezért szükséges regisztrálni további kifejezést, hogy végre a módszert.

És persze a legfontosabb dolog, amit meg kell mondani, az első helyen. Az előírt tulajdonságokat kell meghatározni, hogy a szülő, amelyben a kép felkerül. Ennek során a vitát, jött a következő kódot

A munka eredményeként, hogy a lenti képen.

Egy alternatív megoldás

Van egy másik módja annak, hogy megoldja a feladatot, de ez a módszer nem felel meg a követelményeknek szemantika. Képeket jeleníthet meg a CSS-tulajdonság háttér, amely jelzi a helyét a kép, mint a „központ központ”. Ez ellentétes a szemantikai szabályok, amely szerint a kép logikusan értelmes kimenete az img tag.

Az alábbiakban a kód a mi alternatív megoldások

Segítségével az első vagy a második módszer megkapjuk ugyanazt az eredményt a böngészőben

Ha az utóbbi módszer alkalmazásával tapasztalt programozók elviselni kódot egy háttérképet a HTML-dokumentum. Ez lehetővé teszi, hogy navigálni a dokumentumot, és gyorsan megtalálja a blokk képekkel. És ez a következőképpen néz ki:

Érvek és ellenérvek a módszer

Összehasonlítva a klasszikus egyik alternatív kiviteli a következő előnyökkel jár:

• eltávolítjuk semmilyen korlátozást a szülő (azaz meghatározott helymeghatározás vagy flow-hatás), amelyek az optimális üzemhez szükséges a módszer;
• használata kifejezést kizárt;
• Nem igényel a szülői egységet regisztrálni a telken a megfelelő értéket túlcsordulás vágni nagy képeket;
• számának minimalizálása sornyi kódot.

Azonban ezzel egyidejűleg, az eljárás számos hátránya van:

• nem tartása szemantikai szabályok;
• A megoldatlan meghatározása a kép méretét.

Összegezve

Egy alternatív módszer nem ajánlott, mivel a betartását szemantika nem nagyon kevés fontos tényező az elrendezés a weboldal. A felsorolás azonban előnnyel klasszikus módon elgondolkodtató.

Száma: 2 (közepes 5 kivéve 5)