Css központosító függőlegesen almasav vorstke

Bázisok blokkolja elrendezés példáján központosító blokk elemek függőlegesen sablon segítségével CSS-tulajdonságok: display: table-sejt, line-height vagy pozíció: abszolút fél tagolt.

Központosító egy tárgyat függőlegesen a blokk vorstke valamivel bonyolultabb, mint a vízszintes, és egy sor egyezmény. De minden rendben van.

Kezdjük azzal, hogy a CSS-tulajdonság teszi függőleges igazítása a pozícionáló képest a „alapvonal”, és nem lehet használni elhelyezése a blokkon belül elem. Kivétel ez alól az úgynevezett „table-cell”. Kövessétek őt „egyedi” tulajdonságokkal lehet a kijelző használatával CSS-tulajdonság egy table-cell értéket. Például:

Az eredmény így fog kinézni:

Azonban ez nem fog működni a régebbi böngészők, és ellentétes a logikai blokk vorstke. Véleményem szerint, ha a használni kívánt tulajdonságait asztalok, használja a táblázatot.

Annak érdekében, hogy helyezze el a használt elemek számos trükköt almasav vorstke. A legelterjedtebb változata a CSS-tulajdonságok line-height. amely meghatározza a távolságot az alap betűtípust. Például:

Az eredmény az lesz azonos az előző példában. Nuance csak az, hogy abban az esetben, sortörést, ha a szöveg nem fér el a szélesség, magasság lesz kétszer annyi, stb Ennek elkerülése érdekében, akkor a CSS-tulajdonság white-space értékű nowrap - terek nem veszik figyelembe, sortörés, figyelmen kívül hagyja.

Egy kicsit bonyolultabb, ha kell igazítani a függőleges blokk, és nem egy sor elemet. Ebben az esetben nehéz elérni a rugalmasság, a Meg kell tudni, hogy a méretei a központosító egységet. Az ugyanazon helymeghatározás alapján felhasználásának felét érték behúzás abszolút elem. Például:

Az eredmény így fog kinézni:

Más szóval, a CSS-tulajdonság helyzetbe. kérünk abszolút pozicionálás #LETILT elem. relatív relatív (a lényeg, hogy nem statikus) #parent elem. Továbbá, kérés elem #LETILT behúzással felső szélétől tag #parent egyenlő 50% (fél), azaz top: 50%. Ismerve a magasság #LETILT elem. A teljes nyomvonal a függőleges, állítható az offset a fele a magassága, a CSS-tulajdonság margin-top. azaz margin-top: -10px; feltéve, hogy a magasság: 20px; .