VPF::Выравнивание картинки по высоте и float:left

Garret

Дата 14.8.2010, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 138
Регистрация: 16.9.2006
Где: Киев

Репутация: нет
Всего: 2

Добрый день. Есть такая проблема.

Дано:

Код

<div class="list_item">
   <div style="float:left;width:100px;height:100px;"><a href="#"><img src="..." /></a></div>
   <div style="float:left;width:400px;">Text</div>
</div>

Я хочу центрировать рисунок в первом диве по высоте и ширине через display:table-cell, но не получается.

Код

    text-align: left;
    display: table-cell;
    vertical-align:middle;

Опытным путем определил что проблема в float:left, если убрать то все начинает работать(но конечно ломается положение дивов).

Подскажите как исправить эту проблему или сделать выравнивание по другому.

З.Ы. В интернете видел пару способов, но они не работают(через top:50%, left:50% или margin:auto)

tapa

Дата 15.8.2010, 11:27 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 23.1.2010

Репутация: нет
Всего: нет

Код


<div class="list_item">
   <div style="float:left;width:100px;height:100px;border:1px solid black;">
    <div style="position:relative;top:50%;margin:auto;width:30px;background-color: green;">
       <a href="#"><img src="images.jpg"/></a>
     </div>
   </div>
   <div style="float:left;width:400px;border:1px solid red;">Text</div>
</div>

Мм у меня как-то так вышло. Только нужно задавать ширину дива под изображение, чтобы выравнивал по горизонтали.

А нельзя как то обойтись без центрирования? Или если все изображения одинаковой ширины, то установить его позицию с помощью padding.
А если разной и всё таки центрировать,и блоки "list_item" будут идти друг под другом, то изображения будут "прыгать", мб не очень красиво получится smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »