jquery - 产品中间对齐 div？

Question

我的网上商店有各种各样的产品。假设我有三张产品图片，调整大小后是：

100 x 20
100 x 100
100 x 180

100 x 180 是产品窗口可以采用的最大尺寸。为了获得完美的产品放置，我需要将所有这三个图像都放入 100 x 180 的窗口中。这不是很困难：

<div class="products" style="height: 180px;">
 <div class="product1">
   <img src="prod1.jpg" />
 </div>
 <div class="product2">
   <img src="prod2.jpg" />
 </div>
 <div class="product3">
   <img src="prod3.jpg" />
 </div>

现在，问题在于这些图像都在顶部对齐。我需要它们全部中间对齐，就像表格一样。我可以很容易地用表格做到这一点，但我不知道如何用 CSS 做到这一点。它是像 CSS 一样简单，还是有类似的漂亮 JQuery 插件？

Answer 1

.products div { line-height: 180px; }

…尽管理想情况下您应该使用某种列表，而不仅仅是 div。