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似乎没有添加正确的填充级别来实现这一目标。另外，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>

使用CSS制作一个在图像旁边对齐的居中文本列表

2 个答案: