0

为了使圆角框（参见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; }
4

2 回答 2

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

您的锚标记没有继承高度或宽度，因此它本质上是 0x0 像素。上面的 css 在小提琴中为我工作：http: //jsfiddle.net/MkfAe/

于 2013-09-06T18:33:02.763 回答
0

像这样的东西可能对你有用。http://jsfiddle.net/ZNXvT/1/

我正在使用您的#cell元素并将它们保留为块级元素，并height: 100%;在它们上设置 a 。我还设置height: 100%;了您的锚元素。

#cell {
    height: 100%;
}
a {
    display: block;
    height: 100%;
}

现在进入魔术。您可以在 a 中添加一个元素（我称为 mine .valign-height）并将其设置为height: 100%;，还可以添加 a 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 元素垂直居中。

于 2013-09-06T18:37:33.883 回答