0

丸いボックス ( http://jsfiddle.net/L36nq/を参照) をクリック可能/ホバー可能にするには、使用する必要があります

a {
    display: block;
}

まだ画像（2つの正方形）を中央に保つために、使用する必要があります

#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

このようなものがうまくいくかもしれません。http://jsfiddle.net/ZNXvT/1/

私はあなたの#cell要素を取り、それらをブロックレベルの要素として保持し、height: 100%;それらに設定しています。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;
}

vertical-align はその兄弟要素に合わせて配置されるため、要素を単独で垂直方向に配置することはできません。vertical-align をスプーフィングする非表示の要素がある場合、コンテンツは常に中央に配置されます。このようにして、アンカーがスペースを埋めたままにし、img 要素を垂直方向の中央に保つことができます。

于 2013-09-06T18:37:33.883 に答える