Vertical Align when using flex

Question

I am creating a header and ideally would like the title to the left and the navbar icon over to the right. I can achive this using a parent div set to dislay: flex with justify-content: space-between as seen below.

Using Flex

However the I cannot apply vertical align in this instance to centrally align the text and icon horizontally. I suppose I could use margin to get it looking correct but not sure if this is best approach.

On the other hand I could do something like this using display: inline-block however am then lost on how to postion the icon over to the right.

Using inline-block

My question is which method is better and additionally how I achive the desired functionaility so that the text sits on the left side with the icon on the right side of the viewport ensuring they are both vertical aligned?

Answer 1

You can use align-items to vertically align flex items along the Cross Axis in a row layout.

Specifically, align-items: center so the flex items margin boxes are centered within the line on the cross-axis. Have a look at the updated CodeSandbox Demo

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <h4>Workbench</h4>
  <span>&#9776;</span>
</div>

Answer 2

Is this what you're trying to accomplish?

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<header>
  <h1>
  Text
  </h1>
  
  <div>
  Some Icon
  </div>
</header>

Answer 3

You can use align-items: center. Since your flex direction is row, align-items: center will control the vertical alignment.

div {
    display: flex;
    justify-content: space-between;
    width: 80%;
    align-items: center;
}

Answer 4

If i understood well align-items: center; paired with justify-content: space-between should do the trick