使用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>

问题是这些项目重叠-因此图像彼此之间不是垂直对齐的，我希望它们是垂直的。 上边距和下边距似乎没有添加正确的填充水平来实现此目的。 同样，vertical-align参数似乎不能使文本垂直对齐到图像的中心。

最后，我不确定是否应该在此处使用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>