Question

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网站的一部分。

提前感谢您的帮助。

Answer 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。如果您需要帮助，请大声喊。

Answer 2

首先：代码中的错误很少

您似乎没有ID="div"的元素，但您在所有CSS选择器中都将它作为第一个元素。
您的IMG元素应设置样式的最后一个CSS选择器不符合，因为其中有一个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都不支持它们。

Answer 3

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

text-align: center;

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

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

3 个答案:

首先：代码中的错误很少

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

HTML

CSS

浏览器支持