I have this floated image and I would like to have it on the left of the flex-navbar. The layout should be responsive and the image vertically aligned to the middle (vertically-align: middle; doesn't work). Thanks in advance!
https://jsfiddle.net/wonrpfsc/
<div class="container">
<a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a>
<div id="navbar">
<a href="#">Home</a>
<a href="#">About U</a>
<a href="#">Our Service</a>
<a href="#">Our Products</a>
<a href="#">Contac</a>
</div>
</div>
#navbar {
display: flex;
}
#navbar a {
flex: 1 1 0;
text-align: center;
padding: 10px;
border: 1px solid black;
}
#logo {
width: 10vw;
height: 10vw;
float: left;
vertical-align: middle;
}
You can try moving the logo into the navbar div like this:
'<div class="container">
<div id="navbar">
<a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a>
<a href="#">Home</a>
<a href="#">About U</a>
<a href="#">Our Service</a>
<a href="#">Our Products</a>
<a href="#">Contac</a>
</div>
</div>'
And change the CSS like this:
#navbar {
display: flex;
justify-content: center;
align-items: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.