Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Выравнивание картинки по высоте и float:left

Автор: Garret 14.8.2010, 18:18

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

Дано:

Код

<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

Код


<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