垂直-揃えDIV

Question

これはhttp://ilikeyou.tk/763/で発見私の次/前のナビゲーションのためのコードです：私は縦のボタンを中央にしたいと思います

<div class="navigation"> 
    <a href="<?echo $site;?><?echo$prevs['id']?>" class="prev" title="Previous Like"></a> 
    <? if($nexts['id'] == ''){ ?> 

    <? }else{ ?> 
     <a href="<?echo $site;?><?echo$nexts['id']?>" class="next" title="Next Like"></a> 
    <? } ?> 
</div> 

。私はvertical-align:middle;を使ってみましたが動作しませんでした。私もtop:50%;を試しましたが、それはどちらかの仕事をしませんでした。

.navigation { 
    position: relative; 
    float: left; 
    vertical-align : middle; 
    height: auto; 
    padding: 0; 
    margin: 0 -20px 0 -22px; 
    width: 636px; 
    z-index:1; 
} 

.navigation a.prev{ 
    background: url('images/nav_left.png'); 
    float: left; 
    width: 50px; 
    height: 50px; 
    margin-left:10px; 
} 

.navigation a.next { 
    background: url('images/nav_right.png'); 
    float: right; 
    width: 50px; 
    height: 50px; 
    margin-right:10px; 
} 

ありがとう：

は、ここに私のCSSです！

Answer 1

コンテンツエリアの高さはあまり静的ではないと私は推測しています。

http://jsfiddle.net/aBzhu/

トリックがposition: relative; float: left;に設定され、外側の要素を持つことであり、あなたが垂直方向に中央揃えにしたい要素が静的であるとき、あなたはposition: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;

注意としてセンタリングしたい要素は、これが唯一の動作すること高さ。あなたの使い方に合うと思います。

編集：ああ..私はこれが必然的にie6で動作するとは思わない。また、そのようなちっぽけな方法でyoureの興味を持っていない場合は、Using jQuery to center a DIV on the screen

Answer 2

vertical-alignは、表のセルレンダリングを目的としており、これもかなり問題です。なぜあなたのナビゲーションに一番上の詰め物のいくつかのピクセルを追加しないでくださいul？実際のセンタリングではありませんが、ナビゲーションバックグラウンドで固定高さのグラフィックを使用しているときは、ダナミックスケーリングについて心配する必要はありません。

Answer 3

これをチェックアウトする必要があります。このソリューションは、小規模なテキストのために完璧に私を一致：しかし、作業IE7はEDIT2

+ありません。たとえそれがdiv内のリンクまたはテキストであったとしても、このCSSクラスはDIV内のコンテンツを垂直に整列させることができます。 ....無力性

よろしく、