html - display：table-cellを使用せずに垂直方向に整列し、IE6で動作する必要があります

Question

リンクをリストの中央に垂直に揃えようとしています

jsfiddlehttp : //jsfiddle.net/TwFxN/を参照してください

IE6で機能する必要があるため、テーブルセル表示または行の高さを使用できません。一部のオプションは2行にまたがるので、行の高さは機能しません。

何か案は？

どうもありがとう

デイブ

Answer 1

各 li 内の個々のアンカー タグを中央に配置する場合は、次のようにします。

アンカー タグの高さを固定数に設定できる場合は、次のように動作します。

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
   display: block;
   padding: 0px 5px;
   text-decoration: none;
   color: inherit;
   position: absolute;
   top: 50%;
   font-size: 12px;
   margin-top: -12px;
   text-align: center;
   width: 90%;
}

リスト アイテムの高さが分からない場合は、次のように JavaScript を使用する必要があります。

$('a').each(function() {
    $(this).css("top", Math.max(0, (($(this).parent().height() - $(this).outerHeight()) /      2)) + "px");
});

</p>

リスト項目のセット全体をウィンドウの中央に配置する場合:

ul タグの高さが一貫している場合は、次のようにすることができます。

#nav {
    position: absolute;
    top: 50%;
    margin-top: -5em;
}

ナビゲーションを折り返して正確な中央に表示したい場合は、次のような小さな JavaScript を使用する必要がある場合があります。

$('#nav').css("top", Math.max(0, (($(window).height() - $('#nav').outerHeight()) / 2) +              $(window).scrollTop()) + "px");​