如何在页面水平对div中的图像进行水平居中？

Question

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

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的中心。这会将锚标签的水平大小和可点击区域扩展到整个页面的宽度。

我看到了另一种使用显示的方法:表格单元格；在包含的div (本例中的锚)上，但是我不能使用边距: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 {
}

它起作用了!但是，我不想在锚标记中指定图像的宽度。这个页面已经有了这个信息！

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

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

Answer 1

通过在当前标记上添加一个额外的包装器，您可以这样做：

小提琴

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

Answer 2

如果您喜欢使用显示表格单元格来制作它，那么下面是演示

只需用div包住锚，然后通过定义display: table;将高度100%应用到

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

div{
    width: 100%; 
    height: 100%; 
    display: table;
}
html,body{
    height: 100%;
}