Beart - függőleges igazítását div css

előző ◈ a következő

Kezdjük azzal, hogy ez a kérdés van osztva 2 kérdés. Egyrészt, mivel a div align vagy bármely más elemet a böngésző függőlegesen, másrészt, hogy hogyan csatlakoznak semmit, mint a szöveg, a DIVE. Menjünk érdekében.

Azt is érdemes megjegyezni, hogy még mindig nem tudom, minden normális sposoboa függőlegesen igazítsa a díva, aki dolgozik hibátlan minden böngészőben.

Div Alignment Függőleges Center

2 módja van, az abszolút és releváns. Például, tekintettel a központtól , amelynek szélessége-magasság 100% -os árrés értéke nulla, akkor írunk:

div # közepén háttérben: #CCC; / * az érthetőség kedvéért * /
szélesség: 300px;
magasság: 200px;
pozíció: abszolút;
top: 50%;
bal: 50%;
margin-top: -100px;
margin-left: -150px;
>

a flash film, mint a (más célokra, mint a határozat nem tudom, mert amikor a böngésző ablak méretét kisebb lesz, mint a tartalom a díva, a böngésző „megeszi” része a tartalom a bal felső, ami nem jó. tartalmáért vagy logó)



div # Splash háttér: #CCC; / * az érthetőség kedvéért * /
szélesség: 50%;
magasság: 50%;
pozíció: abszolút;
top: 25%;
bal: 25%;
>

Ebben az időben, a blokk helymeghatározás segítségével csak a koordinátákat a bal felső sarokban. Kivonni a teljes magassága a kültéri egység (az elején úgy döntött, hogy nem lenne ) A magasság a központosító készülék (100% - 50% = 50%). Azt ossza félbe, hogy a felső 25%. Szintén a szélesség és törvény rendre behúzással a bal (a példában: balra: 25%).

Igazítása szövegének díva

Mint mindenki tudja, (. Nem IE) minden normális böngészővel működik:

A következő, például kód:

  3. A szöveg is igazodnia kell a függőleges központ ...

De IE (5,6 és 7-8) nachnayutsya mindenféle különböző perverzió. Ezek vagy alapulnak vonatkozó érdekeltség helyzetét és a tárterületet, vagy a java kifejezés. Sajnos, sem egyik, sem más módon történő összehangolása div IE nem nevezhető ideális, de nincs más alternatíva.

  1. div
  2. magasság: 200px;
  3. display: table-cell;
  4. függőleges-align: közép;
  5. >
  6. div p
  7. margin-top: expressziós ((parentNode.offsetHeight - this.offsetHeight)<0. «0″. (parentNode.offsetHeight — this.offsetHeight)/2 + «px»)
  8. >

  4. A szöveg is igazodnia kell a függőleges központ ...

    3. Lenzi, e profondissima Quiete

    4. infinito silenzio egy questa voce vo comparando:

    1. .betakar
    2. display: table-cell;
    3. függőleges-align: közép;
    4. szélesség: 100%;
    5. magasság: 401px;
    6. >
    7. .éppen az IE-
    8. display: none;
    9. szélesség: 1px;
    10. margin-left: -1px;
    11. >
    12. * Html .Csak-for-IE * html .valign-központ
    13. display: inline-block;
    14. függőleges-align: közép;
    15. >
    16. * Html .valign-központ
    17. szélesség: 100%;
    18. >
    19. * HTML .Csak-for-IE
    20. magasság: 100%;
    21. >
    22. * Html .Csak-for-IE * html .valign-központ
    23. display: inline;
    24. >
    előző ◈ a következő