縦線：中央と表示：表の問題？

-2

navのユーザーdisplay:table、nav ulの、display:table-cell、vertical-align:middleのnav ul liのユーザーがあります。メニュー項目は、中央に垂直に配置されません。誰も助けることができますか？縦線：中央と表示：表の問題？

#main_nav { 
 
    display: table; 
 
} 
 
    
 
#main_nav ul { 
 
    display: table-row; 
 
} 
 

 
#main_nav ul li { 
 
    padding: 10px; 
 
    display: table-cell; 
 
    vertical-align:middle; 
 
}

<nav id="main_nav"> 
 
    <ul> 
 
     <li><a href="index.html">Blog</a></li> 
 
     <li><a href="video_screencasts.html">Videos</a></li> 
 
     <li><a href="almanac.html">Almanac</a></li> 
 
     <li><a href="snippets.html">Snippets</a></li> 
 
     <li><a href="forums.html">Forums</a></li> 
 
     <li><a href="shop.html">Shop</a></li> 
 
     <li><a href="lodge.html">Lodge</a></li> 
 
     <li><a href="jobs.html">Jobs</a></li> 
 
    </ul> 
 
</nav>

出典

2016-08-28 Grey-lover

はすでに動作していると思いますが、あなたは動作するフィーリング/スニペットを投稿してください。 – kukkuz

ここでOKです（[Fiddle]（https://jsfiddle.net/MrLister/at5mjbb2/））、質問は実際には垂直方向に_what_に整列されていますか？ –

あなたの文からメニュー項目は、まだ縦中央に整列しています。 私は、テーブルをページの中央にしたいと考えています。

ご使用のコードvertical-align:middle;は同じではありません。 vertical-alignまたはCSS vertical-align Property を確認してください。その例は非常にきちんと説明されています。

.wrapper { 
    display: table; 
    text-align: center; 
} 

.wrapper ul { 
    display: table-row; 
} 

.wrapper ul li { 
    padding: 10px; 
    display: table-cell; 
    vertical-align:middle; 
}

の下には、ここで JS Fiddle

または非常に簡単かつ容易にあなたが

で全体のコードを置き換えることができているとして、あなたは、CSSを実行することができますページの中央に揃えるためには

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<table align="center"> 
 
    
 
<tr><td><a href="index.html">Blog</a></td></tr> 
 
    <tr><td><a href="video_screencasts.html">Videos</a></td></tr> 
 
    <tr><td><a href="almanac.html">Almanac</a></td></tr> 
 
    <tr><td><a href="snippets.html">Snippets</a></td></tr> 
 
    <tr><td><a href="forums.html">Forums</a></td></tr> 
 
    <tr><td><a href="shop.html">Shop</a></td></tr> 
 
    <tr><td><a href="lodge.html">Lodge</a></td></tr> 
 
    <tr><td><a href="jobs.html">Jobs</a></td></tr> 
 
</table> 
 
</body> 
 
</html>

出典

2016-08-28 09:07:26 DannyBoi

ええ、下のものは検証されません。 CSSマージンを使う方が良いです。 –

縦線：中央と表示：表の問題？

答えて

関連する問題