位置決めテーブルの中心にページ

これは単純な修正があるようですが、私はそれを理解することはできません。私がしようとしているのは、メニューの ".nav"をページ中央に水平に置くことだけです。問題は、私は左にロゴが欲しいということです。そして、それはナビを中心にして私を乱しているようです。位置決めテーブルの中心にページ

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url("http://i.imgur.com/4QGL09u.jpg") no-repeat center center fixed; 
 
    -wekit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#top { 
 
    width: 100%; 
 
    background-color: rgb(000, 255, 000); 
 
} 
 
#logo { 
 
    float: left; 
 
    margin-left: 20px; 
 
    background-color: rgb(255, 000, 000); 
 
} 
 
.nav { 
 
    width: 200px; 
 
    display: table; 
 
    margin: auto; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    padding: 10px; 
 
}

<html> 
 

 
<body> 
 
    <header> 
 
    <div id="top"> 
 
     <img src="http://i.imgur.com/adZJ4Ln.png" alt="logo" id="logo"> 
 
     <ul class="nav"> 
 
     <li class="item">Home</li> 
 
     <li class="item">Projects</li> 
 
     <li class="item">Images</li> 
 
     <li class="item">More</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

出典

2016-10-10 Yama

にあなたは、テーブルを言うが、あなたは持っているuは

チェック出力を期待し、この出力rでありますメニュー。また検索してください、これは尋ねられて、何度も答えられました – pol

私はすでに回答を探していて、私がここでやろうとしていたものには何も適用しませんでした。彼らはすべて回答として「マージン：オート」またはそれに類すると述べた。 – Yama

それはメニューなのでテーブルではありませんので、jfiddleを提供してください –

jsbin

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url("http://i.imgur.com/4QGL09u.jpg") no-repeat center center fixed; 
 
    -wekit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#top { 
 
    width: 100%; 
 
    background-color: rgb(000, 255, 000); 
 
} 
 
#logo { 
 
    float: left; 
 
    margin-left: 20px; 
 
    background-color: rgb(255, 000, 000); 
 
} 
 
.nav { 
 
    width: 200px; 
 
    margin: 0 auto; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    padding: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div id="top"> 
 
     <img src="http://i.imgur.com/adZJ4Ln.png" alt="logo" id="logo"> 
 
     <ul class="nav"> 
 
     <li class="item">Home</li> 
 
     <li class="item">Projects</li> 
 
     <li class="item">Images</li> 
 
     <li class="item">More</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

出典

2016-10-10 15:45:22

それはうまくいけば、それを変更するために正確に何をしましたか？私はマージンを試しました：0オートですが、最初に試してみると動作しませんでした。 – Yama

私は表示を削除しました：テーブルのプロパティと余白を追加：0自動; –

私はdisplay：tableがなぜその原因であるのだろうと思います。とにかく助けてくれてありがとう！ – Yama

位置決めテーブルの中心にページ

答えて

関連する問題