ナビゲーションペインに画像を中央に配置

Question

私はhtml/cssとこのウェブサイトを初めて利用していますが、自分のページのスタイルシートをレイアウトするのに問題があります。 これは私のナビゲーションペインの画像です：http://i.stack.imgur.com/88rwB.png 私は（ハイパーリンクされたリストにも属している）写真を中央に配置したいと思いますが、どのように多くのテクニックを試しても、

これは私のnav CSSです：

nav { 
 
\t display: block; 
 
    margin-left: auto; 
 
    margin-right: auto 
 
    font-family:"Courier New", Courier, monospace; 
 
\t font-size:12px; 
 
\t color: #ffffff; 
 
\t text-align:center; 
 
\t line-height:30px; 
 
    background-color:#68594c; 
 
    height:778px; 
 
    width:100px; 
 
    float:left; 
 
    padding:0px; 
 
} 
 
nav img 
 
{ vertical-align: center; } 
 
nav ul{ 
 
\t list-style-type:none; 
 
\t }

これは私のhtmlです：

<nav> 
 
<ul> 
 
<li><a href="home 3.html"><img src="images/home.png" alt="Home"></a></li> 
 
<li><a href="Menu.html"><img src="images/menu.png" alt="Menu"></a></li> 
 
<li><a href="Blank.html"><img src="images/blank.png" alt="Blank"></a></li> 
 
<li><a href="Blank.html"><img src="images/blanktwo.png" alt="Blank"></a></li> 
 
<li><a href="Blank.html"><img src="images/blank.png" alt="Blank"></a></li> 
 

 
</ul> 
 
</nav>

私は

0を試してみました

nav img { vertical-align: middle; }

が、それは何も変更しませんでした。私は間違って何をしていますか？

Answer 1

あなたはパディングを削除し、ULにtext-align: center;を設定した場合には、画像に

チェックアウトを中心に説明する私のcodepen http://codepen.io/anon/pen/bZObXO

Answer 2

デフォルトでは、ほとんどのブラウザでは、ul要素に左パディングがあります。あなたが言うことができる必要があります：

nav ul { 
    list-style-type: none; 
    padding: 0; 
} 

ことが有効ではありませんので、あなたはまた、nav imgからvertical-align: centerを削除する必要があります。

Answer 3

私はあなたが基礎として、コメントに投稿された画像を使用して私の答えを提出しています：http://i.stack.imgur.com/k8thl.pngここで

はあなたがアクションで私のコードを見ることができるjsfiddleです：https://jsfiddle.net/4kgjw11s/

あなたのHTMLコードは変更されませんが、私は変更を行いましたCSS秒：

nav { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
    font-family:"Courier New", Courier, monospace; 
    font-size:12px; 
    color: #ffffff; 
    text-align:center; 
    line-height:30px; 
    background-color:#68594c; 
    height:778px; 
    width:100px; 
    float:left; 
    padding:0px; 
} 
nav > ul { 
    position: relative; 
    padding: 0px; 
    margin: 0px; 
    list-style-type:none; 
} 
nav > ul > li { 
    text-align: right; 
} 
nav > ul > li > a { 
    margin-right: -25px; 
} 
nav > ul > li > a >img { 
    width: 50px; 
    height: 50px; 
} 

画像寸法が、その後nav > ul > li > a