Vertical Ausrichtung Nav in Header zusammen mit dem Titel

Question

Ich kann nicht scheinen, um die Navigation zu vertical-align: middle; zusammen mit dem Titel zu bekommen. Irgendeine Idee, wie Sie dieses Problem beheben können?

https://jsfiddle.net/ozvmkeaq/

header, 
 
nav { 
 
    height: 80px; 
 
} 
 
header { 
 
    background-color: #E74C3C; 
 
    vertical-align: middle; 
 
} 
 
header nav { 
 
    float: right; 
 
    list-style: center; 
 
    text-transform: uppercase; 
 
    color: #ECF0F1; 
 
    vertical-align: middle; 
 
} 
 
nav li { 
 
    display: inline; 
 
    padding: 10px; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 
.title { 
 
    float: left; 
 
} 
 
.title h1 a { 
 
    color: #ECF0F1; 
 
    text-decoration: none; 
 
    padding: 15px; 
 
}

<header> 
 
    <div class="title"> 
 
    <h1><a href="index.html"> HTTP</a></h1> 
 
    </div> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
     <li><a href="pioneers.html">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

Durch Hinzufügen der folgenden CSS, die Links vertikal zentrieren.

ul { margin: 0; height: 100%; display: table; width: 100%;} 
nav ul li { height: 100%; vertical-align: middle; display: table-cell;} 

Ich habe auch Ihre Geige aktualisiert: https://jsfiddle.net/ozvmkeaq/2/

Grundsätzlich müssen Sie die Kombination von Tisch und vertical-align Eigenschaften dem Browser sagen Sie den Inhalt in der Mitte wollen.

Alternativ können Sie auch flex-box verwenden.

Anzeige: flex; align-items: zentrieren;

Answer 2

Sie müssen sich vertical-align:middle auf die Listenelemente setzen. Ich würde es auch auf die Links gesetzt direkt für jede Listenelement Polsterung zu kompensieren usw.

Zum Beispiel:

nav ul li, nav ul li a{vertical-align:middle;} 

Dies liegt daran, vertical-align die Position setzt auf das übergeordnete Element basiert, so dass Sie brauchen um es auf das untergeordnete Element zu setzen (anders als bei Eigenschaften wie "text-align", bei dem Sie den Stil auf das übergeordnete Element festlegen können, um die darin enthaltenen Elemente zu beeinflussen).

Weitere Informationen finden Sie unter lotrecht bei W3C vertical-align property guide.

Oder Try it here.

Answer 3

Die vertical-align CSS Eigenschaft gibt die vertikale Ausrichtung eines inline oder Tabellenzellenfeld.

Elemente wie h1, ul etc. sind alle block level standardmäßig so wird es nicht funktionieren. Sie können sie zwar auf Inline-Ebene zurücksetzen und sie vertikal in der Mitte ausrichten. Aber aus Gründen der Einfachheit würde ich vorschlagen, das moderne flexbox Layout zu verwenden, siehe das Beispiel und Kommentare wie folgt.

jsFiddle

header { 
 
    height: 80px; 
 
    padding: 0 20px; 
 
    display: flex; 
 
    justify-content: space-between; /*add space between*/ 
 
    align-items: center; /*center algin vertically*/ 
 
    background-color: #e74c3c; 
 
} 
 
header ul { 
 
    display: flex; 
 
    list-style: none; 
 
} 
 
header li { 
 
    padding-left: 10px; 
 
} 
 
header a { 
 
    text-decoration: none; 
 
    color: #ecf0f1; 
 
}

<header> 
 
    <div class="title"> 
 
    <h1><a href="index.html">Title</a></h1> 
 
    </div> 
 
    <nav class="nav"> 
 
    <ul> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
     <li><a href="pioneers.html">Item</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 4

Versuchen Sie, diese

header { 
    background-color: #E74C3C; 
    height: 5em; 
    position: relative; 
} 

header * { 
    padding: 0; 
    margin: 0; 
} 

header a { 
    text-decoration: none; 
} 

header nav, header .title { 
    display: block; 
    height: 100%; 
} 

header .title { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

header .title h1 { 
    position: relative; 
    top: 0.70em; 
} 

header .title a { 
    color: #ECF0F1; 
    margin: 0 0.5em; 
} 

header nav { 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 0 0.5em; 
} 

header ul { 
    list-style-type: none; 
    list-style-position: inside; 
    position: relative; 
    top: 2em; 
    right: 0; 
} 

header ul li { 
    display: inline-block; 
    padding-right: 0.25em; 
} 

Answer 5

Update dieses 2 Stil und es sollte den Trick tun.

nav ul 
{ 
    padding: 0px; 
    margin: 0px; 
} 

nav li 
{ 
    display:inline-block; 
    padding-right:10px; 
    padding-left:10px; 
    line-height: 80px; 
    background-color: green; 
}