htmlcsscenter

How do I center header text in the middle of the navigation menu in html


I am wondering how to center the header text I wrote in the center of the navigation menu that I created, the text is already centered but it is centered at the top of the navigation menu, not in the middle, which is what I need.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

    }
    @media (max-width: 960px){
    .Header .headerLogo{
        display: inline-block;
        width: 86px;
        height: 15px;
        margin-top: 17px;
        margin-left: 6px;
    }
    }
</style>
</head>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
    <header><center><i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i></center></header>
    </a>
</div>
</body>
</html>

Solution

  • You have three options, whereby the first two options are a lot more reliable.

    The first option uses flex-box to center the item horizontally and vertically.

    div {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: blue;
    }
    
    text {
      background: orange;
    }
    <div>
       <text>Centered horizontally and vertically</text>
    </div>

    The second option, instead of using flex-box, uses a relative position for the parent element, an absolute position for the child element, and transform: translate(X, Y) also for the child.

    div {
      width: 100%;
      height: 200px;
      position: relative;
      background: blue;
    }
    
    text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: orange;
    }
    <div>
       <text>Centered horizontally and vertically</text>
    </div>

    The third option, in order to center the element vertically, uses a line-height that is equal to the height of the parent element.

    div {
      width: 100%;
      height: 200px;
      position: relative;
      background: blue;
    }
    
    text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      line-height: 200px;
      background: orange;
    }
    <div>
       <text>Centered horizontally and vertically</text>
    </div>