Using CSS Flexbox, to align the icon and image in the middle

Question

I need to align the image and hamburger icon in one line exactly in the center. I am using display-flex and align-item: content, but the icon and image are not aligning with other items also.

I am getting the alignment as is shown in the following picture:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.header {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.header__left {
  align-items: center;
}

.header__logo {
  height: 25px;
  object-fit: contain;
}

.header__option__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  <link rel="stylesheet" href="./style.css" />
  <title>Navigation Menu</title>
</head>

<body>
  <div class="header">
    <div class="header__left">
      <img class="header__logo" src="https://toppng.com/uploads/preview/fire-logo-png-svg-free-download-fire-logo-11563553513c3wo0p7dt1.png" />
      <a>
        <i class="fas fa-bars"> </i>
      </a>
    </div>
    <div class="header__option">
      <ul class="header__option__nav">
        <li><i class="fas fa-globe"></i><a>Company</a></li>
        <li><i class="fas fa-street-view"></i><a>Branch</a></li>
        <li><i class="fas fa-users"></i><a>Employee</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Why is the hamburger icon is not aligned with other text? What is the appropriate way for doing this?

score 1 · Accepted Answer · answered Jul 31 '20 at 05:28

You just need to add display: flex to your header_left class. Flex doesn't get inherited by children containers of a flex parent and align-items has no meaning outside of flex and grid contexts.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.header {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.header__left {
  display: flex;
  align-items: center;
}

.header__logo {
  height: 25px;
  object-fit: contain;
}

.header__option__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  <link rel="stylesheet" href="./style.css" />
  <title>Navigation Menu</title>
</head>

<body>
  <div class="header">
    <div class="header__left">
      <img class="header__logo" src="https://toppng.com/uploads/preview/fire-logo-png-svg-free-download-fire-logo-11563553513c3wo0p7dt1.png" />
      <a>
        <i class="fas fa-bars"> </i>
      </a>
    </div>
    <div class="header__option">
      <ul class="header__option__nav">
        <li><i class="fas fa-globe"></i><a>Company</a></li>
        <li><i class="fas fa-street-view"></i><a>Branch</a></li>
        <li><i class="fas fa-users"></i><a>Employee</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

score 1 · Answer 2 · answered Jul 31 '20 at 05:30

Well, you need another display: flex; for your .header__left property like this:

.header__left {
  display: flex;
  align-items: center;
}

Otherwise, align-items: center; alone won't apply to that property.

So your final code would be something like this:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.header {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.header__left {
  display: flex;
  align-items: center;
}

.header__logo {
  height: 25px;
  object-fit: contain;
}

.header__option__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  <link rel="stylesheet" href="./style.css" />
  <title>Navigation Menu</title>
</head>

<body>
  <div class="header">
    <div class="header__left">
      <img class="header__logo" src="https://toppng.com/uploads/preview/fire-logo-png-svg-free-download-fire-logo-11563553513c3wo0p7dt1.png" />
      <a>
        <i class="fas fa-bars"> </i>
      </a>
    </div>
    <div class="header__option">
      <ul class="header__option__nav">
        <li><i class="fas fa-globe"></i><a>Company</a></li>
        <li><i class="fas fa-street-view"></i><a>Branch</a></li>
        <li><i class="fas fa-users"></i><a>Employee</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Using CSS Flexbox, to align the icon and image in the middle

2 Answers2