CODEWITHSUNDEEP
csshtml
Ismael Moreno
Ismael Moreno

Reputation: 23

Unable to make hyperlinks vertical-aligned in the center inside a nav tag

I have this sort of navigation bar implemented. My problem is that, no matter how I try to tune style for both nav and hyperlinks inside, I can't make text vertically centered, links are always shown in the very top of the hyperlink boxes. vertical-alignment: middle should be the solution, but nothing happens and the result remains the same.

PS: I oversized the length of the navigation bar to remark the wrong behaviour of the style.

* {
  padding: 0;
  margin: auto;
  font-family: verdana;
}
nav {
  display: flex;
  position: fixed;
  width: 100%;
  height: 60%;
  top: 50%;
  text-align: center;
  background-color: blue;
  display: space-around;
  z-index: 1;
}
nav a {
  float: left;
  width: 20%;
  height: 100%;
  background-color: blue;
  color: white;
  vertical-align: text-bottom;
  font-weight: bold;
  vertical-align: middle;
  font-size: 200%;
  text-align: center;
}
nav a:hover {
  -webkit-animation: selectanim 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation: selectanim 0.5s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}
@keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}
<nav>
  <a>1 link</a>
  <a>2 link</a>
  <a>3 link</a>
  <a>4 link</a>
</nav>

Upvotes: 1

Views: 113

Answers (3)

Oriol
Oriol

Reputation: 288670

Since you are already using flexible boxes, you could turn your links to flexible containers.

This way you can use align-items: center to center their contents vertically:

nav > a {
    display: flex;
    align-items: center;
    justify-content: center; /* Instead of text-align: center */
}


* {
  padding: 0;
  margin: auto;
  font-family: verdana;
}
nav {
  display: flex;
  position: fixed;
  width: 100%;
  height: 60%;
  top: 50%;
  background-color: blue;
}
nav > a {
  flex-grow: 1;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav a:hover {
  -webkit-animation: selectanim 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation: selectanim 0.5s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}
@keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}
<nav>
  <a>1 link</a>
  <a>2 link</a>
  <a>3 link</a>
  <a>4 link</a>
</nav>

Upvotes: 0

Sammy
Sammy

Reputation: 3099

you were on the right track. vertical-align:middle is what you need, however it only works if your element is a table cell. so with css you can set the display to "table-cell" and remove "float:left" and set the parent (nav) to behave like a table and it should work:

nav {
   display: table
}

nav a {
   display:table-cell;
   vertical-align:middle;
}

Here's a fiddle for you. Note that i have removed parts of the css to keep answer clean. Hope that helps

Upvotes: 1

ben.kaminski
ben.kaminski

Reputation: 976

I would add a CSS class to your "a" tags in the html like so:

<a class="vert" onclick="showArticle('...')">1 link</a>

Where the CSS for .vert would be:

.vert {
 padding-top: 15%;
}

You can play with that padding percentage and adjust it to better fit your site, or make it a fixed value... up to you.

link to JSFIDDLE

Give it a shot. Just gives you a bit more control over the "a" element.

Upvotes: 0

Related Questions