Wie vertikal eine Liste Zentrieren in einer Navigationsleiste

Zum Beispiel in: http://codepen.io/SimpleRoger/pen/OmRKNq Wie vertikal eine Liste Zentrieren in einer Navigationsleiste

ich die zentrieren möge: Projekte, Warum sie und Kontakt vertikal; anstatt oben ganz oben zu sein.

header { 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 400; 
 
    background: #55d6aa; 
 
} 
 

 
.navcontainer { 
 
    width: 97%; 
 
    margin: 0 auto; 
 
    background: #AAAAAA; 
 
    position: relative; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
nav { 
 
    float: right; 
 
    /*background: #FFFF22;*/ 
 
    width: 30%; 
 
    margin: 0; 
 
    /*yellow*/ 
 
} 
 

 
.title { 
 
    /*background: #ffff33; 
 
    /*white*/ 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    /*background:#00ff00; */ 
 
    /*green*/ 
 
} 
 

 
nav li { 
 
    /*background: #AE1234; 
 
    /*red*/ 
 
    display: inline-block; 
 
    margin-left: 10%; 
 
    padding: 0; 
 
} 
 

 
nav a { 
 
    color: #123; 
 
    text-decoration: none; 
 
    text-transform: upper-case; 
 
    font-weight: 800; 
 
} 
 

 
nav a:hover { 
 
    color: #FFFFFF; 
 
}

<html> 
 

 
<head> 
 
    <title>Vertigo Web Design</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="navcontainer clearfix"> 
 
     <h1 class="title">Vertigo Web Design</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Projects</a></li> 
 
      <li><a href="#">Why Us</a></li> 
 
      <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

Quelle

2017-05-24 Roger Tan

Dieses 'nav li {padding: 8px 0;}' – Chiller

Mögliches Duplikat von [Vertikale Ausrichtung von Elementen in einem div] (https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) – Alexander

Wenn Sie die Anzeige nicht verwenden möchten : table property then Sie können ** nav li a {Zeilenhöhe: (nav-height value) px; } **. –

Added display: table; zu .navcontainer und

nav,.title { 
    display: table-cell; 
    vertical-align: middle; 
}

header { 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 400; 
 
    background: #55d6aa; 
 
} 
 

 
.navcontainer { 
 
    width: 97%; 
 
    margin: 0 auto; 
 
    background: #AAAAAA; 
 
    position: relative; 
 
    display: table; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
nav { 
 
    /*background: #FFFF22;*/ 
 
    /*yellow*/ 
 
    width: 60%; 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.title { 
 
    /*background: #ffff33; 
 
    /*white*/ 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    /*background:#00ff00; */ 
 
    /*green*/ 
 
} 
 

 
nav li { 
 
    /*background: #AE1234; 
 
    /*red*/ 
 
    display: inline-block; 
 
    margin-left: 10%; 
 
    padding: 0; 
 
} 
 

 
nav a { 
 
    color: #123; 
 
    text-decoration: none; 
 
    text-transform: upper-case; 
 
    font-weight: 800; 
 
} 
 

 
nav a:hover { 
 
    color: #FFFFFF; 
 
}

<html> 
 

 
<head> 
 
    <title>Vertigo Web Design</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="navcontainer clearfix"> 
 
     <h1 class="title">Vertigo Web Design</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Projects</a></li> 
 
      <li><a href="#">Why Us</a></li> 
 
      <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

hinzugefügt

Quelle

2017-05-24 08:19:48 athi

Hey Kumpel können Sie bitte erklären, wie das funktioniert? –

Bearbeitet. Bitte überprüfen Sie jetzt. – athi

Hey Kumpel danke, aber sagen manche Leute nicht, dass sie keine Tische benutzen sollen? –

Wie vertikal eine Liste Zentrieren in einer Navigationsleiste

Antwort

Verwandte Themen