CSS: Menu alignment in header using CSS-CodePudding

I am trying to make a header. I have four menu items and i need them to be aligned across the menu with equal intervals.

JSFiddlelink <script async src="//jsfiddle.net/SM079/xdhu0kr2/1/embed/"></script>

header to be 90% in screen as center aligned.
header links need to be align at equal distance irrespective of screen resolution.

Please help

CodePudding user response：

you can add this to the .topnav class

  display: flex;
align-items: center;
justify-content: center;

CodePudding user response：

Use can use the flexbox property to align the menu items across the menu with equal intervals. Just need to change the css in the .topnav class. Like this:


.topnav {
  overflow: hidden;
  background-color: black;
  display:flex;
  justify-content : space-between;
}

Working code:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      overflow: hidden;
      background-color: black;
      display: flex;
      justify-content: space-between;
    }
    
    .topnav a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a.active {
      background-color: #04AA6D;
      color: white;
    }
  </style>
</head>

<body>

  <div >
    <a  href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>


</body>

</html>

Hope that's how you wanted it to look.

CodePudding user response：

To center the text in the screen use this

.topnav {
  overflow: hidden;
  background-color: black;
  justify-content: center;
  align-items: center;
  display: flex;
}

Then to configurate the space between the header links you can use this

a{
  margin-left: 2rem;
}