Возникла проблема с выравниванием картинки по центру бокса.
Вот так выглядит DIV с картинкой:
Код
<div class='img_border'><img src=resize.php></div>
Вот стиль дива:
Код
.img_border { border: solid 1px #6b7b84;
width: 105px;
height: 90px;
text-align: center;
vertical-align: middle;
background-color: white; }
width: 105px;
height: 90px;
text-align: center;
vertical-align: middle;
background-color: white; }
Размер картинки 80 на 80. По центру она выравнивается отлично.
Как эту заразу по вертикали выравнить?
Спустя 8 дней, 10 часов, 32 минуты, 25 секунд (27.07.2007 - 01:21) Секстурист написал(а):
Если высота бокса фиксированная и высота содержимого известна, как в твоём случае, то можешь так сделать:
тоже самое получитца
Код
.img_border {
border: solid 1px #6b7b84;
width: 105px;
height: 80px;
padding: 5px 0px 5px 0px;
text-align: center;
vertical-align: middle;
background-color: white; }
border: solid 1px #6b7b84;
width: 105px;
height: 80px;
padding: 5px 0px 5px 0px;
text-align: center;
vertical-align: middle;
background-color: white; }
тоже самое получитца
Спустя 1 год, 4 месяца, 6 дней, 19 часов, 40 минут, 6 секунд (3.12.2008 - 22:01) Sylex написал(а):
| Цитата ( @ 4.12.2008 - 00:49) |
| Deny from 217.107.36.73<br />Deny from 78.106.255.10<br /> |
это че, проверка работоспособности спама?
Спустя 1 дней, 20 часов, 20 минут, 15 секунд (5.12.2008 - 18:21) vasa_c написал(а):
Одмины новоявленные! Закройте ужо
Спустя 2 часов, 34 минут, 45 секунд (5.12.2008 - 20:56) Timok написал(а):
а че это вообще?
Спустя 16 часов, 13 минут, 26 секунд (6.12.2008 - 13:10) FatCat написал(а):
Мои извинения, это срабатывание защиты от ботов; цифирка сбилась, не в ту ветку стало логи кидать.
Спустя 5 часов, 11 минут, 34 секунды (4.12.2008 - 03:13) kirik написал(а):
так как див - блочный элемент, то в нем не прокатывают такие штуки как vertical-align: middle;
чтоб выравнять элемент в диве по-вертикали, нужно этот див преобразовать из блочного элемента в обычный ("инлайный"). Тобишь прописать ему - display: table-cell; и все будет окей =)
чтоб выравнять элемент в диве по-вертикали, нужно этот див преобразовать из блочного элемента в обычный ("инлайный"). Тобишь прописать ему - display: table-cell; и все будет окей =)
Спустя 1 месяц, 26 дней, 17 часов, 32 минуты (2.02.2009 - 20:45) SpecTR написал(а):
display: table-cell; тоже не покатит так как IE его не воспринимает.
Для рисунка покатит такой вариант:
.img_border { border: solid 1px #6b7b84;
width: 105px;
height: 90px;
line-height:90px;
text-align: center;
vertical-align: middle;
background-color: white; }
Для рисунка покатит такой вариант:
.img_border { border: solid 1px #6b7b84;
width: 105px;
height: 90px;
line-height:90px;
text-align: center;
vertical-align: middle;
background-color: white; }
Спустя 1 месяц, 5 дней, 2 часа, 49 минут, 58 секунд (7.03.2009 - 23:35) Cookson написал(а):
ЕМНИП, vertical-align:middle прописывается не для родителя, а для содержимого, т.е. его писать нужно не к диву, а к img
Спустя 5 часов, 44 минуты, 10 секунд (8.03.2009 - 05:19) Alchemist написал(а):
самое интересное, что несмотря на кажущуюся парадоксальность, почти все написаное выше - верно 
Спустя 1 час, 22 минуты, 43 секунды (8.03.2009 - 06:42) kirik написал(а):
| Цитата (Alchemist @ 7.03.2009 - 21:19) |
| самое интересное, что несмотря на кажущуюся парадоксальность, почти все написаное выше - верно smile.gif |
Есть такое
vertical-align для блочных элементов выравнивает все содержимое элемента, а vertical-align для инлайнового элемента выравнивает сам элемент. Подтырил отсюда. _____________
from TRIAL with LOVE