Comment puis-je centrer verticalement mon nav sur le logo?

Question

J'essaie de créer une barre d'en-tête avec le logo sur la droite, la navigation horizontale sur la gauche comme d'habitude. J'ai besoin d'éléments de navigation centrés sur le logo verticalement.

J'ai essayé plusieurs méthodes. J'apprécierais que quelqu'un puisse me montrer le chemin et expliquer pourquoi cela a fonctionné, et ce qui me manquait probablement.

body { 
 
    max-width: 995px; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    font-family: 'Arial'; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #222; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.logo img { 
 
    max-width: 235px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.menu li { 
 
    display: inline-flex; 
 
    padding-left: 30px; 
 
} 
 

 
.menu { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    padding-bottom: 25px; 
 
} 
 

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

<div class="nav group"> 
 
    <div class="logo"><img src="img/ahlogo.png" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>

Merci beaucoup!

Answer 1

Je suppose que vous voulez aligner la navigation sur la partie inférieure du logo? Si oui, vous pouvez utiliser display:flex avec les paramètres suivants sur l'élément parent des deux:

.nav.group { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
} 

body { 
 
    max-width: 995px; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    font-family: 'Arial'; 
 
} 
 

 
.nav.group { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: flex-end; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #222; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.logo img { 
 
    max-width: 235px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.menu li { 
 
    display: inline-flex; 
 
    padding-left: 30px; 
 
} 
 

 
.menu { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    padding-bottom: 25px; 
 
} 
 

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

<div class="nav group"> 
 
    <div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>

Alternatives: Si vous voulez centre aligner les verticalement, changer align-items: à center; (ou à top pour l'alignement haut)

body { 
 
    max-width: 995px; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    font-family: 'Arial'; 
 
} 
 

 
.nav.group { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #222; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.logo img { 
 
    max-width: 235px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.menu li { 
 
    display: inline-flex; 
 
    padding-left: 30px; 
 
} 
 

 
.menu { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    padding-bottom: 25px; 
 
} 
 

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

<div class="nav group"> 
 
    <div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Il utilise display:flex pour définir les éléments en ligne.

Si vous avez besoin d'utiliser des navigateurs qui ne supportent pas display:flex (je pense que IE < 9) et vous voulez une manière différente, faites le moi savoir.

Ouvrir sans inclus parce que j'aime à quoi il ressemble.

Orange utilisé pour démontrer le caractère moyen des éléments.

Cela fonctionnera si vous connaissez la hauteur du logo. Si elle est inconnue, ou change de hauteur (beaucoup d'endroits ont des barres de navigation qui rétrécissent un peu quand la page défile), vous aurez peut-être besoin d'une solution différente.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); 
 
.nav { 
 
    display: flex; 
 
    background-color: orange; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 50px; 
 
    font-family: "Open Sans"; 
 
    font-weight: bold; 
 
    justify-content: space-between; 
 
} 
 

 
.menu ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    box-sizing: border-box; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
} 
 

 
.menu ul li:first-child { 
 
    margin-left: 10px; 
 
} 
 

 
.menu ul li a { 
 
    text-decoration: none; 
 
}

<div class="nav group"> 
 
    <div class="logo"><img src="//placehold.it/200x50" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>