“a”中“图像”的中间垂直对齐答案

【问题标题】：middled vertical alignement of an "img" in "a"“a”中“图像”的中间垂直对齐
【发布时间】：2011-08-04 14:03:41
【问题描述】：

HTML 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head></head>
    <body>

        <div class="lt-0 partner">
            <div class="csc-textpic csc-textpic-center csc-textpic-above" >
                <div class="csc-textpic-imagewrap csc-textpic-single-image">
                    <a>
                        <img href="bilder/bild.jpg" />
                    </a>
                </div>
            </div>
        </div>

    </body>
</html>

CSS 代码：

#div .partner div div{
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}

#div .partner div div a{
    height: 100%;
    width: 100%;
    display: block;
    vertical-align: middle;
}

#div .partner div div div a img{
    display: inline;
}

我的问题是，图像必须居中，但链接必须是全尺寸。它是 Typo 3 网站的一部分。

提前感谢您的帮助。

【问题讨论】：

注意：#div .partner div div div a img可以简化为#div .partner div a img或改为#div > .partner > div > div > div > a > img。否则，根据您的 HTML，我认为您的 CSS 中没有多个 div 选择器。
这似乎全错了..我没有看到您在 css 中选择的 id 为“div”的 div :)
我们在您的 CSS 中看到的那些尺寸是静态的吗？图像尺寸也是静态的，所以你知道它有多大？
@Robert Koritnik 同意，#div > .partner > div > div > div > a > img 比 #div .partner div a img 快。

标签： css image vertical-alignment

【解决方案1】：

我认为你的意思是like this fiddle。

.partner div div {
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}
.partner div div a {
    height: 100%;
    width: 100%;
    display: block;
    line-height: 140px;
    text-align: center;
}
.partner div div a img {
    vertical-align: middle;
}

如果容器的大小没有确定，那么使用this style fiddle：

.partner div div {
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}
.partner div div a {
    height: 100%;
    width: 100%;
    display: block;
    text-align: center;
}
.partner div div a img {
    position: relative;
    top: 50%;
    margin-top: -25px; /* = half the image height */
}

如果容器和图像的高度都不确定，那么您需要 javascript。如果您需要帮助，请大声喊叫。

【讨论】：

如果这些维度不是静态的怎么办？您将无法像以前那样设置line-height...
+1 用于添加最后一句。解决方案本身或多或少等同于第一个解决方案。一个元素仍被假定为静态的。但是我想知道您将如何解决问题，如您所建议的那样，使用额外的 SPAN 元素而不使用 Javascript...
@Robert 嗯，我认为 this trick 和 line-height: 0 会起作用，但我错了。不过很奇怪。
那个trick被用来在图像上放置徽章。在那种特殊情况下，图像容器仍然是静态尺寸的……但这似乎仍然是一个不错的技巧，我显然没有花足够的时间去理解，因为我真的不明白这个技巧。
@Robert 我也使用了技巧 in this answer。明确一点：我认为this fiddle 会起作用，但它不会。

【解决方案2】：

首先：您的代码中有一些错误

您似乎没有带有 ID="div" 的元素，但您在所有 CSS 选择器中都将它作为第一个元素。
最后一个 CSS 选择器不满足 IMG 元素的样式，因为其中的 DIV 太多了。
IMG 元素没有定义href 属性，而是定义src

第二种：支持动态维度的无脚本解决方案

我已经简化了您的 HTML 并稍微更改了 CSS 以使其在 JSFiddle 上更加明显。所有 DIV 和 IMG 元素都有任意大小，因此样式不依赖于它们的任何尺寸。

代码如下：

HTML

<!-- dimensions are set inline to make them of different size -->
<div class="container" style="height: 100px; width: 250px;">
    <a href="#">
        <img src="img111.png" />
    </a>
</div>
<div class="container" style="height: 120px; width: 150px;">
    <a href="#">
        <img src="img222.png" />
    </a>
</div>

CSS

.container {
    border: 2px solid #c00;
    display: table;
}
.container a {
    border: 2px solid #f90;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container a img {
    border: 2px solid #9cf;
    background: #eee;
    padding: 2px;
}

浏览器支持

我使用的display 类型在当今大多数浏览器中都受支持，除了（当然）在 IE 中您至少需要版本 8。任何较旧的supposedly 都不支持它们。

【讨论】：

@NGLN：现在呢？ -1 可以去掉吗？ :)

【解决方案3】：

您可以使用标签“a”获得此图像的水平对齐：

text-align: center;

但不幸的是，要获得垂直对齐，您需要使用父 div 的已知高度为该图像设置 margin-top（或者，具有相同结果，“a”标签的 padding-top）。您可以为此使用一些 jquery 插件（只需在 google 中搜索“jquery vertical align plugin”之类的东西，有很多插件）或编写自己的脚本。

【讨论】：