要使圆角框(见 http://jsfiddle.net/L36nq/)可点击/可悬停,我需要使用
a {
display: block;
}
然而,为了使图像(两个正方形)居中,我需要使用
#left {
display:table;
...
}
#right {
display:table;
...
}
如何在保持图像居中的同时使整个圆形框可单击/可悬停?
.HTML
<div id="left">
<div id="cell">
<a href="http://google.com/">
<img src="box.svg" width="75%" height="75%" />
</a>
</div>
</div>
<div id="right">
<div id="cell">
<a href="http://bing.com/">
<img src="box.svg" width="75%" height="75%" />
</a>
</div>
</div>
.CSS
#left {
display:table; position:absolute;
top:25%; left:25%; width:24%; height:50%;
vertical-align:middle; text-align:center; margin: auto; border-radius:30px;
background-color: #D88;
}
#right {
display:table; position:absolute;
top:25%; left:51%; width:24%; height:50%;
vertical-align:middle; text-align:center; margin: auto; border-radius:30px;
background-color: #88D;
}
#cell {display:table-cell; vertical-align:middle;}
a {
display: block;
}
body { background-color: #9D9; }
a {
display: block;
min-width: 100%;
min-height: 100%;
position:absolute;
top:0;
}
您的锚标记不是继承高度或宽度的,因此它本质上是0x0像素。上面的 css 在小提琴中为我工作:http://jsfiddle.net/MkfAe/
这样的东西可能对你有用。 http://jsfiddle.net/ZNXvT/1/
我正在获取您的#cell
元素并将它们保留为块级元素,并对其进行height: 100%;
。我还在您的锚元素上设置了height: 100%;
。
#cell {
height: 100%;
}
a {
display: block;
height: 100%;
}
现在进入魔术。您可以在 a 中添加一个元素(我称之为我的 .valign-height
)并将其设置为 height: 100%;
,也可以添加一个vertical-align: middle;
。
a .valign-height {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
然后使用图像(或 svg)本身,我将其设置为 vertical-align: middle;
.
a img {
vertical-align: middle;
}
元素本身不能垂直对齐,因为垂直对齐与其同级对齐。如果我们有一个隐藏的元素可以为您欺骗垂直对齐,它将始终将您的内容居中。这样,您可以保持定位点填充空间,并使 img 元素保持垂直居中。