составление списка центрированного текста рядом с изображением с помощью CSS

Question

Я хотел бы составить (ненумерованный или маркированный) список элементов, где у каждого элемента есть некоторый текст, который находится рядом с изображением. Важно, чтобы текст был выровнен по вертикали к центру изображения, и чтобы было достаточно верхнего и нижнего отступов, чтобы каждая пара текста и изображения не перекрывалась по вертикали. Я пытался использовать что-то вроде этого:

img.floatRight { float: right; margin-bottom: 2px; border: 0px; vertical-align: text-middle}
.myitem { font-size: 12pt; margin-bottom: 50px; margin-top: 130px; vertical-align: middle}

в теле HTML-страницы:

<!-- item 1 -->
<img src="item1.jpg" class="floatRight"><p class="myitem">Description of item 1</p>
<!-- item 2 -->
<img src="item2.jpg" class="floatRight"><p class="myitem">Description of item 2</p>

проблема в том, что элементы перекрываются - поэтому изображения не выровнены по вертикали друг к другу, как хотелось бы. margin-top и margin-bottom не добавляют правильный уровень заполнения для достижения этой цели. Кроме того, параметр вертикального выравнивания, по-видимому, не выравнивает текст по вертикали по центру изображения.

наконец, я не уверен, должен ли я использовать здесь p class = "" или div class = "" ... опять же, важно не допускать дублирования между каждым элементом '

есть идеи как это исправить? Большое спасибо.

Answer 1

Я бы начал с размещения изображений внутри блока p.myitem и дал ему:

p.myitem {
    overflow: hidden;
}

Это должно позаботиться о перекрытии.

О вертикальном выравнивании изображений и текста, которые могут быть хитрыми, используя CSS. Если решение с вертикальным выравниванием не работает, и вы знаете высоту изображений и это всего лишь одна строка текста, самое простое решение - задать для абзаца высоту строки, равную изображениям.

Answer 2

Вертикальное выравнивание вещей без использования таблиц - это боль в заднице! Вам лучше использовать стол для этого. Все ваши изображения имеют одинаковую ширину? Если нет, вы можете удалить фиксированную ширину в td.item_photo {} и td.item_photo img {}. Также вы можете изменить ширину table.items с auto на 100% или на величину px (например, 400px), если хотите.

Надеюсь, это поможет решить вашу проблему.

table{margin:0;padding:0;border-collapse:collapse}

table.items{width:auto}
td.item_photo{vertical-align:middle;text-align:left;width:200px;padding:0 0 15px 15px}
td.item_text{vertical-align:middle;text-align:left;padding:0 0 15px 0;font-size:12px;line-height:16px}
td.item_photo img{display:block;width:200px}

<table class="items">
    <tr>
        <td class="item_text">Item 1 Description</td>
        <td class="item_photo"><img src="/images/item1.jpg" /></td>
    </tr>
    <tr>
        <td class="item_text">Item 2 Description</td>
        <td class="item_photo"><img src="/images/item2.jpg" /></td>
    </tr>
</table>