使用 CSS 制作与图像相邻的居中文本列表答案

【问题标题】：making a list of centered text aligned next to image with CSS使用 CSS 制作与图像相邻的居中文本列表
【发布时间】：2011-01-16 19:05:44
【问题描述】：

我想制作一个（非编号或项目符号）项目列表，其中每个项目都有一些与图像相邻的文本。文本与图像的中心垂直对齐很重要，并且有足够的顶部和底部填充，以便每对文本和图像不会垂直重叠。我尝试使用这样的东西：

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 似乎没有添加正确的填充级别来实现这一点。此外，vertical-align 参数似乎不会将文本垂直对齐到图像的中心。

最后，我不确定是否应该在此处使用 p class="" 或 div class=""...再次强调，重要的是不要在每个项目之间有重叠'

关于如何解决这个问题的任何想法？非常感谢。

【问题讨论】：

标签： html css

【解决方案1】：

我会先将图像放在 p.myitem 块中并给它一个：

p.myitem {
    overflow: hidden;
}

这应该注意重叠。

关于图像和文本的垂直对齐，使用 css 可能会很棘手。如果垂直对齐解决方案不起作用并且您知道图像的高度并且它只有一行文本，那么最简单的解决方案是为段落赋予与图像相等的行高。

【讨论】：

【解决方案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>

【讨论】：