在锚点内垂直对齐图像

【问题标题】：Vertical Align Image inside Anchor在锚点内垂直对齐图像
【发布时间】：2011-09-12 02:55:06
【问题描述】：

我有一个有两列的<ul>

代码：

<li class="clearfix">
<div class="product-copy">
 Product Content Here
</div>
<a href="">
    "PRODUCT IMAGE HERE"
</a>
</li>

.product-copy 在高度上扩展为内容，宽度是固定的。

我希望能够将锚点内的图像垂直对齐到中心。所以无论.product-copy的高度有多大，右栏的图片总是居中的。

请注意，我仍然是新用户，因此无法在锚点中键入正确的图像 html，但锚点中有一个 html 图像。

有什么想法吗？

谢谢

【问题讨论】：

【解决方案1】：

你可以试试一些 CSS 之类的

.product_img { position:absolute; top:0; bottom:0; }

这是凭记忆的，您可能需要删除 position:absolute;来自班级。

只需将类添加到 img 标签，这将使您的图像垂直对齐 div 的中间。

<img srv="my_image.png" class="product_image" />

【讨论】：

你的意思是 li a img 吗？ .product-copy 中没有图片
这将是一个专门针对图像的新类。我倾向于为此使用我的 CSS 文件，但您也可以将 CSS 包含到 img 元素的样式标签中。如果您没有隐式使用 img 元素，您也可以尝试将类分配给 a 标签。
感谢您的回答，但这不起作用，所有图像都显示在页面顶部。我希望我可以向您展示该站点，但它仍在本地服务器上。尽管我们决定保持原样，但不要担心这个:-)
@Judy Vialoux 你也可以在课堂上尝试margin-top和margin-bottom，在我当前的站点中，我使用发布的方法（我检查过），它非常适合图像的垂直对齐： )
+！为我工作。谢谢！