how to vertically align text in a fixed topnav?

Question

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/

that fixed it perfectly actually, thank you! [I'll have to look more into "displaY" to see if I can use it anywhere else in the future since I haven't heard of it before [then again im very very new to code] — Achrya, Aug 02 '22 at 03:12

Ashish radadiya · Accepted Answer · 2022-08-02T06:07:20.380

please update the css and try this one. it will work.

---> refer the attached image

.topnav {
background-image: url(Backgrounds/sky.JPG);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
position: fixed;
margin-top: -4%;
margin-left: 15%;
border-style: solid;
border-width: 5px;
Border-color: #163854;
width: 71%;
padding-top: 0px;
margin-bottom: 0px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;}



.topnav a {
color: white;
font-size: 20px;
padding: 15px;
overflow: hidden;
text-decoration: none;
display: inline-block;}

how to vertically align text in a fixed topnav?

1 Answers1