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

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:

<div class="logo">
        <h4>
          <img src="./rsc/Logo.png" alt="" />
          Deux
        </h4>
        <!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
      </div>

and this is my CSS:

* {
  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;
}

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>