Question

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

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

布局LOOKS正确，但是图像标签通过向任一侧添加边距将其自身置于锚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而不需要任何人为干预。

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

Answer 1

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

<强> FIDDLE

<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

如果您想使用display table-cell，那么这里是demo

用div包裹你的锚点然后通过定义display: table;

来应用高度100％

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

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

如何在div中水平居中，同时在页面上水平居中div？

2 个答案:

CSS