html - 使 div 成为可点击链接与垂直居中之间的冲突

Question

要使圆 Angular 框(参见 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; }

Answer 1

a {
display: block;
min-width: 100%;
min-height: 100%;
position:absolute;
top:0;
}

您的 anchor 标记没有继承高度或宽度，因此它本质上是 0x0 像素。上面的 css 对我有用:http://jsfiddle.net/MkfAe/