I'm attempting to display an HTML unordered list horizontally with each item having the same length and height, while also containing a link. One of the items should also contain an image. My goal is to align these items vertically.
To achieve this, I tried using the flex display property but I am struggling to vertically align the content of the li elements.
In the example below, both 'Some text' and the image (labeled as 'Logo') within orange bordered boxes should be vertically aligned, which is currently not the case.
I don't want to modify the existing HTML code in terms of structure or introduce new elements that don't add any new information; I am looking to achieve the desired alignment solely through CSS adjustments. .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
#navbar {
background:silver;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
#navbar ul > li {
flex: 1;
border: 5px dotted green;
}
#navbar a {
border: 5px dotted orange;
}
#navbar img {
height: 80px;
vertical-align:middle;
}
</style>
<title></title>
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#">Some text</a></li>
<li><a id="logo" href="#"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1...DataURLvaluehere="" /></a></li>
</ul>
</nav>
</body>
</html>