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