Wie werden Navigationslinks auf die gleiche Höhe wie das Logo gesetzt?

Ich arbeite an einem Nav-Menü, siehe unten.Wie werden Navigationslinks auf die gleiche Höhe wie das Logo gesetzt?

/* 
 
Variables 
 
*/ 
 
body { 
 
    font: 100% "Lato", sans-serif; 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    margin-top: 47px; 
 
} 
 

 
/* 
 
Navigation menu 
 
*/ 
 
nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: white; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ 
 
    border-bottom: solid 3px #21ce99; 
 
    z-index: 1; 
 
} 
 
nav ul li { 
 
    float: left; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    color: #21ce99; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
nav ul li a:hover { 
 
    background-color: #F2F2F2; 
 
} 
 

 
/* 
 
Layout 
 
*/ 
 
section { 
 
    position: relative; 
 
    float: left; 
 
    width: 60%; 
 
    background-color: white; 
 
} 
 

 
aside { 
 
    position: relative; 
 
    float: right; 
 
    width: 40%; 
 
    clear: right; 
 
} 
 

 
footer { 
 
    clear: both; 
 
    background-color: #21ce99; 
 
    height: 500px; 
 
} 
 

 
/* 
 
Styling 
 
*/ 
 
h1 { 
 
    color: rgba(0, 0, 0, 0.87); 
 
    font: 300% "Lato", sans-serif; 
 
    padding: 30px; 
 
} 
 

 
p { 
 
    color: rgba(0, 0, 0, 0.54); 
 
    font-size: 1.3em; 
 
    margin: 20px; 
 
} 
 

 
a#logo { 
 
    font: 300% 'Wire One', sans-serif; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    max-width: 600px; 
 
    margin: 10px; 
 
} 
 

 
table, th, td { 
 
    border: solid .13em #16a085; 
 
    border-radius: .3em; 
 
    font-size: 15px; 
 
    padding: 10px; 
 
    border-collapse: collapse; 
 
} 
 

 
/* 
 
Widgets 
 
*/ 
 
.btn { 
 
    padding: 1em 1em; 
 
    display: inline-block; 
 
    border-radius: .38em; 
 
    border: .12em solid #21ce99; 
 
    text-decoration: none; 
 
    color: #21ce99; 
 
    margin: 20px; 
 
} 
 

 
.btn:hover { 
 
    background-color: #21ce99; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
 
    <link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'> 
 
    <title>methusela</title> 
 
</head> 
 

 
<body> 
 

 

 
    <nav> 
 
    <ul> 
 
     <li><a id="logo" href="index.html">methusela</a></li> 
 
     <li><a href="index.html">Discover</a></li> 
 
     <li><a href="histoire.html">Buy</a></li> 
 
     <li><a href="contact.html">Yes</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 

 

 
    <div id="container"> 
 

 

 
    <section> 
 

 

 
     <h1></h1> 
 

 

 
     <a href="#" class="btn"> 
 
      Learn more 
 
     </a> 
 

 
    </section> 
 

 

 
    <aside> 
 
     <img src="" /> 
 
    </aside> 
 

 

 
    <footer> 
 
    </footer> 
 

 

 
    </div> 
 
</body> 
 

 
</html>

Alle Verbindungen waren in der Mitte der Nav-Box ursprünglich vertikal, aber nachdem ich hinzugefügt ein Logo, die unterschiedliche Größe Text verwendet. Alle Menüverknüpfungen sind nicht mehr in der Mitte.

Gibt es eine Möglichkeit, die Abmessungen von Menüverknüpfungen automatisch so zu vergrößern, dass sie mit dem größten Element übereinstimmen? Oder gibt es eine Möglichkeit, die Links innerhalb der Box vertikal zu zentrieren?

Vielen Dank für jede Hilfe.

Quelle

2016-05-06 soyster

Zeigen Sie Ihre ul als flex und align-items: center und justify-content: center Eigenschaften nutzen sie in der Mitte der Box beide jeweils vertikal und horizontal, zu setzen.

nav ul { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: white; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ 
    border-bottom: solid 3px #21ce99; 
    z-index: 1; 
}

JSFiddle. Wenn Sie verwenden, zentrieren Sie Ihre Elemente vertikal in Ihrem flex Container. Wenn Sie justify-content: center verwenden, zentrieren Sie Ihre Elemente horizontal in Ihrem flex Container.

Quelle

2016-05-06 22:11:51

Vielen Dank für Ihre Hilfe. Weißt du überhaupt, dass ich den Hover-Hintergrund-Farbwechsel auf den oberen und unteren Rand der Nav-Box ausdehnen könnte? – soyster

@soyster Ja, Sie müssen Ihren 'display: block;' Ihrer 'nav ul li a'-Klasse entfernen. Ich denke, das ist es, worauf Sie sich beziehen. –

Wie werden Navigationslinks auf die gleiche Höhe wie das Logo gesetzt?

Antwort

Verwandte Themen