Wie man eine img in einer horizontalen ul ausrichten

Question

Ich habe eine Navigation funktioniert gut in meiner Website, aber, wir beschlossen, das Logo in der Mitte davon und jetzt kann ich nicht vertikal auszurichten, ich versuchte mit line-height aber es hat den Trick nicht gemacht.

Ich habe den Code in das Snippet, kann mir jemand eine Hand geben?

nav > ul > li > a > img { 
 
    width: 60px; 
 
    } 
 

 
nav > ul { 
 
    list-style: none; 
 
    } 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
    } 
 

 
nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: black; 
 
    }

<nav> 
 
    <ul> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    </ul> 
 
</nav>

Answer 1

inline-block ist standardmäßig vertical-align:baseline es so auf middle,

gleiche Regel zu img, wenn Sie also nicht zu li anwenden wollen können Sie auf img stattdessen anwenden

nav > ul > li > a > img { 
 
    width: 60px; 
 
    /*vertical-align:middle - this would work here by itself too */ 
 
} 
 
nav > ul { 
 
    list-style: none; 
 
} 
 
nav > ul > li { 
 
    display: inline-block; 
 
    vertical-align: middle 
 
} 
 
nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: black; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo" /> 
 
     </a> 
 
    </li> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    <li><a href="#">Shop</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

Nur das Bild vertikal auszurichten, die vertical-align Eigenschaft.

Der von Ihnen gewünschte Wert ist höchstwahrscheinlich middle.

nav > ul > li > a > img { 
 
    width: 60px; 
 
    vertical-align:middle; 
 
    } 
 

 
nav > ul { 
 
    list-style: none; 
 
    } 
 

 
nav > ul > li { 
 
    display: inline-block; 
 
    } 
 

 
nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: black; 
 
    }

<nav> 
 
    <ul> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Wi-Fi_Logo.svg/1280px-Wi-Fi_Logo.svg.png" alt="logo"/></a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    <li><a href="#">Shop</a></li> 
 
    </ul> 
 
</nav>