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 网站的一部分。
感谢您提前提供帮助。
最佳答案
我认为你的意思是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。如果您需要帮助，请大声喊出来。
关于css - "img"中 "a"的中间垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6942825/