Need to vertically center two elements inside a header

HTML-CSS
1

I’ve never learned about “display: flex,” but I’m trying to do the Landing Page project without the flex display.

I have two elements inside the header tag:

  • img
  • nav

They look like this inside the header tag:
<header id="header>
*** ***
*** ***
*** <a href="#" class=“nav-link>Intro***
*** <a href=”#" class=“nav-link>Programming Languages***
*** <a href=”#" class="nav-link>Example***
*** ***

How to make both of them vertically centered within the header tag?

MY CSS File
{
box-sizing: border-box;
border: 1px solid white;
}

body
{
background-color: #000;
//margin: 0px;
}

#header
{
width: 100%;
height: auto;
align-content: space-evenly;
padding: 0px;
}

#header-img
{
width: 5%;
height: 100%;
margin: 0px;
}

#nav-bar
{
display: inline;
margin: 0px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

If this project is being built on codepen, go ahead and leave a link here, so someone can help you figure out this problem…

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.