Беарт - вертикальне вирівнювання div в css

Почну з того, що це питання ділиться на 2 питання. По-перше, як вирівняти div або будь-який інший елемент по вертикалі в браузері, а, по-друге, як вирівняти що-небудь, наприклад, текст в діві. Підемо по порядку.

Також варто зауважити, що я до сих пір не знаю ЖОДНОГО нормального способоа вертикально вирівнювати діви, який би працював без огріхів у ВСІХ браузерах.

Вирівнювання div по центру по вертикалі

Є 2 способи, абсолютний і релевантний. Наприклад, щоб відцентрувати щодо , у якого ширина-висота 100% і відступи обнулені, пишемо:

div # center background: #CCC; / * для наочності * /
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
>

наш флеш-ролик, наприклад (іншого призначення такого рішення не знаю, тому що, коли розмір вікна браузера стає менше розміру вмісту діва, браузер «з'їдає» частину вмісту зліва і зверху, що для контенту або логотипу не є добре.)



div # Splash background: #CCC; / * для наочності * /
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
>

На цей раз для позиціонування блоку використовуємо лише координати його лівого верхнього кута. Віднімаємо із загальної висоти зовнішнього блоку (на початку статті вирішили що це буде ) Висоту центрована блоку (100% - 50% = 50%). ділимо її навпіл і отримуємо top: 25%. Також чинимо з шириною і відповідно відступом зліва (в прикладі: left: 25%).

Вирівнювання тексту в діві

Як всі знають, у всіх нормальних браузерах (НЕ IE.) Працює це:

Для наступного, наприклад, коду:

  3. Текст, який потрібно вирівняти по центру по вертикалі ...

А ось в IE (як в 5,6, так і в 7-8) начнается всякі різні збочення. Вони або засновані на релевантних позиціях і процентних відступи, або на java expression. На жаль, ні ті, ні інші способи вирівнювання div в IE можна назвати ідеальними, проте, інших альтернатив немає.

  1. div
  2. height: 200px;
  3. display: table-cell;
  4. vertical-align: middle;
  5. >
  6. div p
  7. margin-top: expression ((parentNode.offsetHeight - this.offsetHeight)<0. «0″. (parentNode.offsetHeight — this.offsetHeight)/2 + «px»)
  8. >

  4. Текст, який потрібно вирівняти по центру по вертикалі ...

    3. lenzi, e profondissima quiete

    4. infinito silenzio a questa voce vo comparando:

    1. .wrap
    2. display: table-cell;
    3. vertical-align: middle;
    4. width: 100%;
    5. height: 401px;
    6. >
    7. .just-for-IE
    8. display: none;
    9. width: 1px;
    10. margin-left: -1px;
    11. >
    12. * Html .just-for-IE, * html .valign-center
    13. display: inline-block;
    14. vertical-align: middle;
    15. >
    16. * Html .valign-center
    17. width: 100%;
    18. >
    19. * Html .just-for-IE
    20. height: 100%;
    21. >
    22. * Html .just-for-IE, * html .valign-center
    23. display: inline;
    24. >