使居中文本列表与CSS图片旁边对齐

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

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>

的问题是项目重叠 - 因此图像不垂直对齐这对方，这我” d喜欢他们。 margin-top和margin-bottom似乎并没有添加正确的填充级别来实现这一点。此外，垂直对齐参数似乎不会将文本垂直对齐到图像中心。

最后，我不知道我是否应该使用P类=“”或DIV CLASS =“”这里...再次，它不会对如何每个项目

任何想法之间的重叠是很重要的解决这个问题？非常感谢。

来源

2010-02-14 user248237dfsf

垂直对齐的东西，不使用表是一个痛苦的屁股！为此，你最好使用一张桌子。你的图像是否都使用相同的宽度？如果不是，则可以在td.item_photo {}和td.item_photo img {}中删除固定宽度。你也可以改变table.items宽度从自动到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>

来源

2010-02-15 01:04:11 Seth

我就开始把p.myitem块内的图像，并给它一个：

p.myitem { 
    overflow: hidden; 
}

这应该采取重叠的照顾。

关于图像和文本的垂直对齐，使用css可能会非常棘手。如果垂直对齐解决方案不起作用，并且您知道图像的高度并且它只是一行文本，则最简单的解决方案是为段落提供与图像相同的行高。

来源

2010-02-15 01:40:26 jeroen

使居中文本列表与CSS图片旁边对齐

回答

相关问题