vertikale Zentrierung Side Navbar

Jungs. Ich bin ziemlich neu in CSS und es ist mein erster Versuch, eine vertikale Navbar zu erstellen. Nachdem ich gelernt habe, dass ich -40 Rand für meine <li> verwenden muss, um den Text horizontal zu zentrieren, bekam ich die nächste Herausforderung. Ich verstehe es nicht, den Text vertikal zu zentrieren. Vielleicht könnte jemand mir helfen :-)vertikale Zentrierung Side Navbar

body { 
 
    font-family: Lato; 
 
} 
 

 
.nav { 
 
    width: 300px; 
 
    height: 100%; 
 
    margin: -8px; 
 
    background-color: grey; 
 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0 0 0 -40; 
 
} 
 

 
.nav li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-weight: bold; 
 
    
 
} 
 

 
.nav li a:hover { 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    <title>Webdesign</title> 
 
</head> 
 
    
 
<body> 
 
    <ul class="nav"> 
 
    <li><a href="#">START</a></li> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</body> 
 

 

 
</html>

Quelle

2016-11-25 Neverland

Willkommen zu Stack Overflow! Bitte lesen Sie unsere [SO Fragen-Checkliste] (http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist), um Ihnen zu helfen, eine gute Frage zu stellen und somit eine gute Antwort zu erhalten. –

Nur wenige Dinge:

.nav li { 
list-style: none; 
text-align: center; 
margin: 0 0 0 -40; // You forgot to define a unit, so it won't work. (40 what ? px, em, rem, %...) 
}

Ich schlage vor, Sie margin und padding zurücksetzen * {margin:0; padding:0;}, weil Sie einen Rand zu Ihrer li hinzugefügt um die Polsterung von th ul auszugleichen

.nav {height:100%;} wird nicht funktionieren, wenn alle Eltern (HTML, Körper, etc ...) keine richtige Höhe definiert haben.

Sie können eine vertikale align auf unterschiedliche Weise erreichen, man wäre:

*{padding:0; margin:0;} 
 
html, body {height:100%;} 
 
body { 
 
    font-family: Lato; 
 
    vertical-align:middle; 
 
} 
 
div { 
 
    display:table; 
 
    height:100%; 
 
} 
 
.nav { 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: grey; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.nav li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-weight: bold; 
 
    
 
} 
 

 
.nav li a:hover { 
 
    color: white; 
 
}

<body> 
 
    <div> 
 
    <ul class="nav"> 
 
     <li><a href="#">START</a></li> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

Was ich getan habe ist:

Added ein div der ul Einwickeln
Hinzugefügt eine Höhe: 100%; zu html, Körper und das div
hinzugefügte Anzeige: Tabelle; zu diesem div
Hinzugefügt display: table-cell; vertikal ausrichten: Mitte; zu Ihrem .nav

Quelle

2016-11-25 21:18:43 Kangouroops

Danke für Ihre Hilfe und noch mehr Dank für diese verständliche Erklärung.XOXO – Neverland

Ich bin froh, wenn das geholfen hat. ;) – Kangouroops

So ähnlich?

body { 
 
    font-family: Lato; 
 
} 
 

 
.nav { 
 
    width: 300px; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: grey; 
 
    text-align: center; 
 
} 
 

 
.nav li { 
 
    display: block; 
 
    list-style: none; 
 
} 
 

 
.nav li a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    color: black; 
 
    font-weight: bold; 
 
    display: block; 
 
} 
 

 
.nav li a:hover { 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    <title>Webdesign</title> 
 
</head> 
 
    
 
<body> 
 
    <ul class="nav"> 
 
    <li><a href="#">START</a></li> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</body> 
 

 

 
</html>

Quelle

2016-11-25 21:50:40 Maximilian

Leider nicht, aber danke für die Antwort. Ich stelle das Nav auf eine Höhe von 100% ein, um den gesamten Bildschirm mit der seitlichen Navigationsleiste anzuzeigen. Und ich möchte, dass der Text in dieser 100% "Display" Höhe zentriert ist. – Neverland

Stück des Kuchens! Wenden Sie einfach die folgende Regel an:

.nav { 
    padding: 0; 
}

und keine negativen Ränder verwenden. Hoffe, das hilft Ihnen :-)

Quelle

2016-11-25 22:33:05

Sie Flexbox verwenden können Sie Eltern ul fügen in Ihrem Code genannt .nav

display: flex; 
justify-content: center; 
align-items: center; 
flex-direction: column;

und Kind-Elemente (li)

flex-wrap: wrap-reverse; 
align-self: center;

Flexbox können versichern Sie sich, dass Ihr Artikel 100% in der Mitte ist mit:

justify-content: center;

Quelle

2016-11-25 22:57:41

vertikale Zentrierung Side Navbar

Antwort

Verwandte Themen