1

円の輪であるナビゲーションを作成しました。各リンクのテキストを中央に配置する必要があります。単語が 1 つしかない場合は、行の高さでこれを行うことができますが、ほとんどの単語には複数の単語があります。

どうすればこれを機能させることができますか?

サンプル: http://jsfiddle.net/elogicmedia/nVPYQ/12/

私が話していることを示すための画像。テキストはすべて各リンクの上部にあります。

ここに画像の説明を入力

私のCSSコード

nav {
    position: relative;
top: 200px;
left: 200px;
    font-family: helvetica, arial;
}
li {
list-style: none;
}
a {
position: absolute;
text-decoration: none;
width:98px;
height:98px;
border-radius:50%;
line-height:1.5em;
text-align:center;
    font-family: helvetica, arial;
    background-color: #C0D9D9;
}
a:link, a:visited {
    color: #000;
    font-size: 12px;
}
a:hover {
   color: red;
}
4

1 に答える 1

4

これは、JS を操作するのにそれほど難しくありません。aスパンでラップすることで、それぞれの高さとテキスト自体の高さを計算できます。position: relativeスパンで使用しtop、計算に基づいて適切な中間点に設定します。

http://jsfiddle.net/ExplosionPIlls/nVPYQ/13/

于 2013-05-09T22:08:59.840 に答える