Positionierung Tisch in der Mitte der Seite

Es scheint, als ob es eine einfache Lösung, aber ich kann es nicht herausfinden, geschweige denn eine Antwort finden, also werde ich fragen. Ich versuche nur, das Menü ".nav" horizontal auf der Seite zu zentrieren. Das Problem ist, ich möchte das Logo auf der linken Seite und es scheint mit mir zu verwirren, zentriert das Nav.Positionierung Tisch in der Mitte der Seite

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>

Quelle

2016-10-10 Yama

Sie sagen Tabelle erwartet, aber Sie haben eine Speisekarte. Bitte auch suchen, das wurde oft gefragt und beantwortet – pol

Ich habe bereits nach Antworten gesucht, und keiner von ihnen galt für das, was ich hier versuchte. Sie alle sagten "margin: auto" oder ähnliches als Antwort. – Yama

Es ist nicht Tabelle, es ist Menü so bitte geben Sie jfiddle –

ist dieser Ausgang r u

Kontrollausgang in 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>

Quelle

2016-10-10 15:45:22

Das hat funktioniert, was genau hast du getan, um es zu ändern? Ich habe Rand versucht: 0 Auto, aber es hat nicht funktioniert, als ich zuerst versuchte. – Yama

Ich habe gerade die Anzeige entfernt: Tabelle Eigenschaft und Rand hinzugefügt: 0 auto; –

Ich frage mich, warum Display: Tisch war der Schuldige. Na trotzdem, danke für die Hilfe! – Yama

Positionierung Tisch in der Mitte der Seite

Antwort

Verwandte Themen