Ngels

Спасибо всем за отзывчивость =) Что-то с сервером форума наверное вчера была, или у меня косяк, никаких сообщений вчера не видел... Хочу получить вот так: Тут я сделал таблицей, но хочу перейти к дивам, но никак не могу сделать это "чертово" вертикальное выравнивание... По-поводу того, что ниже ИЕ8 display:table не работает в курсе, но судя по статистике с моего сайта таких пользователей 2%, так что не критично, зато прогрессивно !)

Где же вы, знающие... Помогите, не могу ничего придумать. Пока остановился вот на таком варианте: HTML <div id="footer" class="plinks"> <a href="#"><img src="../About_l.png" width="175" height="100" />Текст 1</a> <a href="#"><img src="../Cable_pic.png" width="350" height="200" />Текст 2</a> <a href="#"><img src="../Sound_pic_l.png" width="175" height="100" />Текст 3</a> <a href="#"><img src="../Accs_pic_l.png" width="175" height="100" />Текст 4</a> </div> CSS #footer { margin: 50px 50px 0px 50px; width:1000px; overflow:hidden; } .plinks { } .plinks a { font-size: 14px; font-weight: bold; text-transform: uppercase; font: "Myriad Pro"; text-align: center; color: #333; text-decoration:none; } .plinks a:hover { color: #F00; } .plinks img { display:inline-block; vertical-align:bottom; overflow: hidden; } .plinks img a { display:inline-block; vertical-align:bottom; margin-left:20px; margin-right:20px; overflow: hidden; } .plinks img a:hover { color: #F00; } Но не могу никак придумать, каким макаром текст внизу картинок расположить по центру... при </br> список становится вертикальным...

Да, я так и сделал, и div'ы убрал из ссылок, но все эти действия так не принесли желаемого результата - вертикального выравнивания по нижнему краю. К какому же, все-таки, элементу применять??? display: table-cell; vertical-align: bottom;

А как мне тогда сделать, чтоб текст был под картинками?

Добрый день! Никак не могу справиться с вертикальным выравниванием. Есть меню из дивов в списке. В дивах как картинки, так и текст. Одно из картинок выше других. У меня выравнивается по верхней границе, а нужно по нижней. HTML <div id="header_img"> <ul id="categories_img"> <li><a href="#"><div><img src="../About_l.png" width="175" height="100" /></div>Contacts</a></li> <li><a href="#"><div><img src="../Cable_pic.png" width="350" height="200" /></div>Cable</a></li> <li><a href="#"><div><img src="../Sound_pic_l.png" width="175" height="100" /></div>Sound</a></li> <li><a href="#"><div><img src="../Accs_pic_l.png" width="175" height="100" /></div>Accs</a></li> </ul> </div> CSS #header_img { margin: 50px 0px 0px 50px; } #header_img ul#categories_img { float: center; list-style: none; } #header_img ul#categories_img li { float: left; font: "Myriad Pro"; text-align: center; } #header_img ul#categories_img li a { display: block; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #000; text-decoration: none; } #header_img ul#categories_img li a:hover { color: #999; } A IMG { border: none; } Я уж вставлял где только можно: display: table-cell; vertical-align: bottom; Ничего не выходит display: table-cell; vertical-align: middle;