Bewährtes Verfahren zum vertikalen Zentrieren von Logo und Menüelementen in der Kopfzeile

Question

Ich merke ständig, dass ich sowohl das Logo als auch das Hauptmenü vertikal in einem Kopf mit voller Breite zentrieren muss. Gibt es eine allgemein akzeptierte Methode, um damit umzugehen?

Answer 1

#header { 
 
    box-sizing: border-box; 
 
    background: #ffc301; 
 
    padding: 10px 15px; 
 
    display: table; 
 
    width: 100%; 
 
    height: 70px; 
 
} 
 

 
.logo { 
 
    background: #000; 
 
    text-align: center; 
 
    width: 70px; 
 
    color: #fff; 
 
} 
 

 
.logo, 
 
.menu { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
.menu ul { 
 
    text-align: right; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<header id="header"> 
 
    <div class="logo">Logo</div> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 2

Sie flexbox es mit justify-content: center; und align-items: center; Eigenschaften verwenden können, zu erhalten.

#header { 
 
    box-sizing: border-box; 
 
    background: grey; 
 
    padding: 10px 15px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 70px; 
 
} 
 

 
.logo { 
 
    background: black; 
 
    text-align: center; 
 
    width: 70px; 
 
    padding: 15px; 
 
    color: #fff; 
 
} 
 

 
.menu{ 
 
    flex: 1; 
 
    text-align: right; 
 
} 
 

 
.menu ul li{ 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
a{ 
 
    text-decoration: none; 
 
}

<div id="header"> 
 
    <div class="logo">logo</div> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#">item#1</a></li> 
 
     <li><a href="#">item#2</a></li> 
 
     <li><a href="#">item#3</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 3

Sie können mit "display: inline-block" Eigenschaft und verkürzen Sie den Code so einfach wie unten ..

HTML:

<header> 
<div class="logo"><img src="logo.png" /></div><!-- 
--><nav class="menu"> 
<ul> 
    <li><a href="#">Item 1</a></li><!-- 
    --><li><a href="#">Item 2</a></li><!-- 
    --><li><a href="#">Item 3</a></li><!-- 
    --><li><a href="#">Item 4</a></li> 
</ul> 
</nav> 
</header> 

CSS:

header{ 
background-color: grey; 
box-sizing:border-box; 
display:inlnie-block; 
padding:10px 15px; 
width:100%; 
} 
.logo,.menu{ 
display:inline-block; 
font-size:0; 
vertical-align:middle; 
} 
.logo{ 
text-align:left; 
width:30%; 
} 
.logo img{ 
max-width:100%; 
} 
.menu{ 
text-align:right; 
width:70%; 
} 
.menu ul li{ 
display:inline-block; 
font-size:0; 
vertical-align:middle; 
} 
.menu ul li a{ 
font-size:14px; 
line-height:18px; 
text-decoration:none; 
}