1

这是我到目前为止所拥有的。

http://jsfiddle.net/Jazzepi/6Tgqs/

<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
</a>

.banner {
    display: block;
    margin: 0 auto;
}
img {
    display: block;
    margin: 0 auto;
}

布局看起来是正确的，但图像标签通过在任一侧添加边距，使其自身在锚 div 内居中。这会将锚标记的水平尺寸和可点击区域扩展到整个页面的宽度。

我看到了另一种使用 display:table-cell; 的方法。在包含的 div （在这种情况下是锚点）上，但是我不能使用 margin: 0 auto; 将包含的 div 居中的技巧。

http://jsfiddle.net/Jazzepi/6Tgqs/1/

<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
</a>

.banner {
    display: table-cell;
    vertical-align: middle;
}
img {
}

我的目标是使锚 div 居中在页面中，并且它的可点击区域设置为图像的大小。我认为我的主要问题是嵌套在锚点内的 img 不会给锚点标签任何宽度。如果我这样做。

http://jsfiddle.net/Jazzepi/6Tgqs/3/

<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
</a>

.banner {
    display: block;
    margin: 0 auto;
    width: 1000px;
}
img {
}

有用！但我不想在锚标签内指定图像的宽度。该页面已包含此信息！

编辑-最后一个链接“有效”，但我不想要宽度：1000px；在锚 div 中。如果我稍后更改可能具有不同宽度的图像，则我必须更改锚标记的宽度。我希望锚标记包含 img 而无需任何人工干预。

编辑 - 谈论水平居中的东西。不是垂直的。

4

2 回答 2

2

使用围绕当前标记的额外包装器，您可以执行以下操作：

小提琴

<div class="container">
<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
    </a>
</div>

CSS

.container
{
    text-align:center;
    width: 100%;
}
.banner {
    display:inline-block;

}
img {
    display: table-cell;
    vertical-align: middle;
}
于 2013-07-28T12:01:28.707 回答
0

如果你喜欢使用 display table-cell 来制作它，那么这里是演示

只需用 div 包裹你的锚，然后通过定义应用高度 100%display: table;

.banner {
    display: table-cell;
    vertical-align: middle;
}

div{
    width: 100%; 
    height: 100%; 
    display: table;
}
html,body{
    height: 100%;
}
于 2013-07-28T12:06:47.537 回答