How to align both image and text in the navigation bar - html

Question

I'm trying to experiment on my design since i'm still understanding CSS, i can't understand why my image and text didn't align to each other on my navigation bar, this is what it looks like:
This is my code in HTML:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
}
.logo img {
width: 50px;
height: 60px;
/* border: 2px solid black; */
margin: 0 0 0 15px;
float: left;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: rgb(245, 245, 245);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
padding: 20px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
<div class="logo">
<h4>
<img src="./rsc/Logo.png" alt="" /> Deux
</h4>
<!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
</div>

Answer 1

Please find flex implementation.
Add
h4 {
display: flex;
align-items: center;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
}
.logo img {
width: 50px;
height: 60px;
/* border: 2px solid black; */
margin: 0 0 0 15px;
/* float: left; */
}
h4 {
display: flex;
align-items: center;
}
<div class="logo">
<h4>
<img
src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_twitter-512.png"
alt="" />
Deux
</h4>
</div>

Answer 2

You can try setting vertical-align:middle to the <img> to align that
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
}
.logo img {
width: 50px;
height: 60px;
/* border: 2px solid black; */
margin: 0 0 0 15px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: rgb(245, 245, 245);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
padding: 20px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
h4 img {vertical-align:middle;}
<div class="logo">
<h4>
<img src="https://media.flaticon.com/dist/min/img/stickers.png">
Deux
</h4>
</div>

Answer 3

Use flex as shown below
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logo {
color: rgb(21, 168, 144);
text-transform: uppercase;
letter-spacing: 10px;
display: flex;
flex-direction: row;
align-items: center;
}
.logo img {
width: 50px;
height: 60px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: rgb(245, 245, 245);
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
padding: 20px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
<div class="logo">
<h4>
Deux
</h4>
<img src="./rsc/Logo.png" alt="" />
</div>