CSS: vertikal-align auf img und list

Ich habe eine Navigation und ich wollte die img und die Liste (ul, li) zentriert auf der gleichen Linie (vertical-align:middle;) aber die Liste ist über dem img. Meine Frage ist also, wie ich beide auf dieselbe Linie zentrieren kann?CSS: vertikal-align auf img und list

HTML:

<div id="logo"> 
    <a href=""><img src=""></img></a> 
</div> 

<nav id="main-nav"> 
    <ul> 
     <li> 
      <a href=""></a> 
     </li> 
    </ul> 
</nav> 

CSS: 

#logo, #main-nav ul li { 
    display: inline-block; 
    float: left; 
    margin-left: 2.5%; 
    position: relative; 
    vertical-align: middle; 
}

schätzen ich jeden Kommentar und helfen!

Quelle

2016-04-11 thissven

verwenden Sie boostrap? –

Nein, ich mache es von meinem eigenen – thissven

oky, also schlage ich vor, dass Sie Tabelle verwenden. so ist es die bessere Möglichkeit, die gleiche Linie zu richten.,., Sie können beide in individuellen Tag machen. Es ist also besser, wenn Sie keinen Boostrap verwenden. –

In Ihrem CSS richten Sie die Listenelemente aus, während Sie <nav> ausrichten möchten.

Quelle

2016-04-11 09:19:15 sk904861

Ich bin fast fertig mit meiner Seite und ich konnte nicht herausfinden, dass von mir selbst! Danke, es hat funktioniert! – thissven

@ This.Sven dort ist eine Sache mit Ihrem html/css dort, wie Sie nicht haben müssen: float: left; 'a' display: inline-block; 'element. Das mache ich automatisch. Auch das Flotieren des 'li' sollte eine' clearfix' Klasse auf dem 'ul' haben. Nur ein paar Hinweise;) –

CSS: vertikal-align auf img und list

Antwort

Verwandte Themen