CSS 大师的复杂垂直居中（无法触及 HTML）

发布于 2024-12-10 08:04:52 字数 4088 浏览 2 评论 0原文

我正在尝试将这些图像垂直居中。我无法更改我的 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;}

提前感谢您的帮助。

原文

I am trying to Vertically center these images. I can't change my HTML. Is it possible to do it? here's the fiddle: http://jsfiddle.net/EAGQH/2/ I also put the code here:

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>

And here is my CSS (so far) :

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;}

Thanks in advance for your help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苹果你个爱泡泡 2024-12-17 08:04:52

如果您不必浮动 li，那么您可以使用 inline-table 显示选项来使 Vertical-align:middle 执行此操作。

因此，对于 li

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

来说，css 看起来像这样对于 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/< /a>

If you don't have to float the li's, then you could use the inline-table display option to make vertical-align:middle do it's thing.

So the css would look like this for the li's

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

Concerning IE6 and 7, they don't support position:table-cell, so instead the workaround is to give the container following styles: