Question

我正试图将这些图像垂直居中。我不能改变我的HTML。有可能吗？这里是小提琴：http://jsfiddle.net/EAGQH/2/我也把代码放在这里：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" content="0">
<link media="screen" type="text/css" href="css.css" rel="stylesheet">
</head>

<body>
<ul class="photo-grid">
<li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/150x200" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
 <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
</ul>

这是我的CSS（到目前为止）：

ul.photo-grid {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 925px;
    }
ul.photo-grid li {
    float: left;
    margin: 10px;
    min-height: 250px;
    width: 200px;
}
ul.photo-grid li:after {
    clear: both;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    display: block;
    font-size: xx-large;
    height: 0 !important;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    }
ul.photo-grid a {
    display: block;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}
ul.photo-grid img:after {
    clear: both;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    display: block;
    font-size: xx-large;
    height: 0 !important;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
}
ul.photo-grid span {display:block;}

提前感谢您的帮助。

Answer 1

如果你不需要浮动li，那么你可以使用inline-table display选项进行vertical-align：middle do it。

所以css对于li来说看起来像这样

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

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

position:absolute;
top:50%;

然后给孩子们这些风格

position:relative;
top:-50%;

这只需要适用于IE6和7，所以要么为它添加一个无样式表，要么使用内联＃。

现在你的例子还需要将图像放在彼此相邻的左边，所以你需要有一个外部容器：

position:relative;
float:left;

你可以使用你的'li'，你的'a'用于垂直对齐容器，img和span用作子项（但仍然仅用于ie6和7）。

我已将其添加到您的内联＃选择器 - http://jsfiddle.net/EAGQH/69/

中

CSS Gurus的复杂垂直居中（无法触摸HTML）

1 个答案: