Mindent a css igazítás
Minden coder folyamatosan szembesülnek azzal az igénnyel, hogy hangolja össze a tartalmat a blokk vízszintes vagy függőleges. Van néhány jó cikket ebben a témában, de az általuk kínált sok érdekes, de kevés gyakorlati lehetőség, mert mi van, hogy időt tölteni, hogy kiemelje fontos. Úgy döntöttem, hogy ezt az információt olyan formában, ami hasznos számomra, hogy többé nem a google.
Kiegyenlítés blokkok ismert méretű
A legegyszerűbb módja a CSS align blokk, amelynek magassága (függőleges igazítás) és a szélesség (vízszintes igazítás) előre ismert.
Elsimítjuk padding
Néha nem tudja középre az elemet, és adja hozzá „padding” tulajdoni határát.
Például, van egy kép a 200 200 pixel, és azt szeretnénk, hogy középre a 240 blokk 300 tudjuk beállítani a magassága és szélessége a külső egység = 200px, és adjunk hozzá 20 pixellel a felső és az alsó, és 50 a bal és a jobb oldalon.
Alignment abszolút pozicionált blokkok
Ha az egység beállítása „összesen: abszolút”, akkor lehet elhelyezni képest a legközelebbi szülő „helyzet: a relatív”. Ehhez minden tulajdonság ( „top”, „jobb”, „alsó”, „balra”) a beltéri egység rendelni ugyanazt az értéket, valamint a „margin: auto”.
vízszintes igazítás
Igazítás azt jelenti, "text-align: center"
Összehangolni a szöveg a blokkban van egy speciális tulajdonság „text-align”. Ha a „központ”, a szöveg egyes sorai összehangolja vízszintesen. Többsoros szöveg ezt a megoldást csak ritkán használják, legtöbbször ez a lehetőség is látható, hogy összehangolják a span-s, linkeket vagy képeket.
Egyszer volt felér egy szöveget mutatják, hogy a nyomvonal a szöveg segítségével a CSS, de semmi érdekes nem történt volna meg. Először úgy döntöttem, hogy másolja valahol a versike, de eszébe jutott, hogy lehet elrontani egyediségét a cikket, és a kedves olvasó nem lesz képes megtalálni azt a Google-on. És akkor úgy döntöttem, hogy megírom ezt egy bekezdés van -, mert a lényeg nem az, és egy vonalba.
Érdemes megjegyezni, hogy ez a funkció működik nem csak szöveges, hanem bármilyen belső elemek ( „display: inline”).
De ez a szöveg balra van igazítva, de ez a blokk, amely egy vonalban van a középhez képest a borítás.
Önterülő blokkok segítségével a különbözet
Blokk szintű elemek egy bizonyos szélességű könnyen vízszintesen, ha beállítja őket „margin-left: auto; margin-right: auto”. Általánosan használt rövidített: „margin: 0 auto” (nulla helyett bármilyen érték lehet). De itt a függőleges igazítás egy ilyen módszer nem alkalmas.
Azt is érdemes align minden blokk, ahol lehetőség van (ami nem igényel fix vagy abszolút pozicionálás) - ez a leglogikusabb és megfelelő. Bár úgy tűnik, nyilvánvaló, de néha ijesztő példákkal negatív árrés, ezért úgy döntöttem, hogy tisztázza.
függőleges igazítás
A függőleges igazítás sokkal nagyobb probléma - látszólag a CSS nem volt biztosított. Számos módja van, hogy elérjék a kívánt eredményt, de ezek nem nagyon érdekes.
Alignment tulajdonság line-height
Abban az esetben, ha a blokk csak egy sort, akkor lehet elérni függőleges igazítás, a tulajdon „line-height” és telepítése neki a kívánt magasságot. Ahhoz, hogy biztonságos, mérlegelniük több és „height”, amelynek értéke egyenlő a „line-height”, mert az utóbbi nem minden böngészőben.
Ez lila vonal, amelynek magassága megegyezik a magassága a blokk.
Lehetőség van arra is, hogy elérjék a távtartót több sorban. Ehhez szükség van egy kiegészítő áramlási átalakító, és állítsa be a sor magasságát neki. A beltéri egység lehet multi-line, de biztos, hogy „inline”. Ahhoz, hogy ez szükséges alkalmazni „vertical-align: middle”.
Ez az inline-elem. Íme néhány narancs
vonalak. ezek egy vonalban
köszönhető, hogy a megállapított szülői vonal magasság mértékegység.
Blokknál csomagolást kell telepíteni „font-size: 0”. Ha nem állítja be a betűméretet nulla, akkor a böngésző lenne hozzá néhány extra pixel. Azt is meg kell adnia a betűméretet és sormagasságának a beltéri egység, mivel ezek a tulajdonságok öröklődnek a szülő.
Alignment táblázatokban függőleges
Property „vertical-align” is hat a sejtek a táblázatban. C beállított érték „középső”, a tartalom középre a sejten belül. Természetesen a táblázatos elrendezés korunk kell tekinteni archaikus, de kivételes esetekben lehet szimulálni meghatározásával „display: table-cell”.
Általában azért, hogy összehangolják a függőleges használatra csak ebben a kivitelezésben. Az alábbiakban egy példát az elrendezés, kivenni a már kész projekt. A kamat nevezetesen a képet, amely függőlegesen középre módszerrel.
