[ solved } vertically center aligning text in a topnav

August 2, 2022

So i’ve already attempted to position the links in the topnav using "margin-top" and "margin-bottom", and also "padding-top" and "padding-bottom". Whenever I added the code, whether it be using pixels or %, it didn’t change the position of the text at all. This was inside of the " .topnav a { " css.

When I put "padding-bottom" and its value in just " .topnav { ", it changed the bottom padding but using "padding-top" didn’t do anything. Using the margin styles above also didn’t do anything, and putting the tags above the padding for left and right didn’t do anything either.

Is there a way to do this without having to rework the entire page?

Code:

      /* TOPNAV */
      
      .topnav { /*topnav bar*/
  background-color: #1283DC;
  overflow: hidden;
  position: fixed;
  margin-top: -5%;
  margin-left: 15%;
  border-style: solid;
  border-width: 5px;
  Border-color: #163854;
  width: 71%;
  height: 5%;
  padding-top: 0px;
  margin-bottom: 0px;
  border-radius: 50px;
}
  .topnav a { /*topnav text*/
  color: white;
  text-align: center;
   font-size: 20px;
   padding: 61px 62px 61px 56px;
   margin-left: 6px;
   overflow: hidden;
    border-style: solid;
  border-color: #163854;
  border-width: 6px;
  
}   
.topnav a:hover { /*topnav text when hovering*/
  color: lightblue;
}

The html for the topnav is the following, which I don’t think is the issue:

<div class="title"><strong> Noah's Heart</strong> Fan Collection </div>
  
  <div class="topnav">
   <a href="">one</a>
   <a href="">two</a>
   <a href="">three</a>
   <a href="">four</a>
   <a href="">five</a>
   <a href="">six</a>
  </div>

I’ve searched for tutorials and similar questions but I haven’t found any, but if there are then my bad.

Here is the site im working on in case there might be a layout issue instead. https://noahsheart.neocities.org/