CSS大师的复杂垂直居中（超链接HTML）

我正试图将这些图像垂直居中。我无法更改我的HTML。有可能吗？这里是小提琴：我也把代码放在这里：

HTML:

---

提前感谢您的帮助。

如果您不必浮动li，那么您可以使用“内联表格显示”选项使“垂直对齐：中间对齐”为所欲为

因此，css对于li的

ul.photo-grid li {
    display:inline-table;
    margin: 10px;
    height: 250px;
    width: 200px;
    text-align: center;
    vertical-align:middle !important;
}

关于IE6和IE7，它们不支持position:table cell，因此解决方法是为容器提供以下样式：

position:absolute;
top:50%;

然后给孩子们这些风格

position:relative;
top:-50%;

这只需要应用于IE6和IE7，因此可以为此添加样式表，或者使用inline#

现在，您的示例还需要将图像放置在相邻的左侧，因此您需要一个外部容器，其中包含：

position:relative;
float:left;

您可以使用'li'表示垂直对齐容器，使用'a'表示垂直对齐容器，使用img和span作为子项（尽管仍然仅适用于ie6和IE7）

---

我已经用内联选择器将它添加到你的小提琴中-

为什么你不能触摸HTML？没错，它们不支持表格单元格。一种解决方法是将li的位置设置为相对并向左浮动，然后取包含图像和跨度的元素并将其定位为绝对位置和50%顶部，然后将内容定位为相对位置并具有-50%顶部。这将产生同样的效果。我将编辑答案，并将其添加到小提琴中。

position:relative;
top:-50%;

position:relative;
float:left;