How to align text in the middle in ul li?

Issue

As you can see in the below drop down menu that the text is not aligned in the middle although I have used text-align: center and vertical-align: middle property as well, but it's not working. The text is horizontally aligned in the center, but it's not vertically aligned in the middle.

a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #999;
}

a:hover {
  color: #777;
}


/* NAVIGATION */

.navigation {
  display: block;
  list-style: none;
  padding: 0;
  width: 150px;
  height: 50px;
  margin: 20px auto;
  background: #95C11F;
  vertical-align: middle;
}

.navigation,
.navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation:hover,
.navigation:hover a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation a.main {
  display: block;
  vertical-align: middle;
  line-height: 41px;
  height: 50px;
  font: bold 20px/40px calibri, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}

.navigation:hover a.main {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.04);
}

.navigation li {
  display: block;
  width: 150px;
  height: 50px;
  background: #F7F7F7;
  font: normal 12px/40px arial, sans-serif !important;
  color: #999;
  text-align: center;
  vertical-align: middle;
  margin: 1px auto;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}

.navigation li:nth-child(even) {
  background: #F5F5F5;
}

.navigation li:nth-child(odd) {
  background: #EFEFEF;
}

.navigation li.n1 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n2 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n3 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n4 {
  -webkit-transition: 0.2s linear 0.1s;
  -o-transition: 0.2s linear 0.1s;
  transition: 0.2s linear 0.1s;
}

.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover .n2 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n3 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n4 {
  transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n5 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

<div class="caption">
  <ul class="navigation">
    <link rel="stylesheet" href="dropdown-style.css">
    <a class="main" href="#url">BUY NOW</a>
    <li class="n1"><a href="#url">BUY ON AMAZON US</a></li>
    <li class="n2"><a href="#url">BUY ON AMAZON CA</a></li>
  </ul>
</div>

Kindly let me know what changes shall I make to align the text vertically in the middle?

TIA!

Solution

a {
  display: block;
  text-decoration: none;
  width: 100%;
  color: #999;
}

a:hover {
  color: #777;
}


/* NAVIGATION */

.navigation {
  display: block;
  list-style: none;
  padding: 0;
  width: 150px;
  height: 50px;
  margin: 20px auto;
  background: #95C11F;
  vertical-align: middle;
}

.navigation,
.navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation:hover,
.navigation:hover a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation a.main {
  font: bold 20px/40px calibri, sans-serif;
  text-align: center;
  padding: 5px 0;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}

.navigation:hover a.main {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.04);
}

.navigation li {
  display: flex;
  align-items: center;
  width: 150px;
  height: 50px;
  background: #F7F7F7;
  font: normal 12px/40px arial, sans-serif !important;
  color: #999;
  text-align: center;
  vertical-align: middle;
  margin: 1px auto;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}

.navigation li:nth-child(even) {
  background: #F5F5F5;
}

.navigation li:nth-child(odd) {
  background: #EFEFEF;
}

.navigation li.n1 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n2 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n3 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n4 {
  -webkit-transition: 0.2s linear 0.1s;
  -o-transition: 0.2s linear 0.1s;
  transition: 0.2s linear 0.1s;
}

.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover .n2 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n3 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n4 {
  transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n5 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

The above CSS should sort out your issues. Apply it in the sandbox or check it in my codepen before you copy/paste. You're breaking "good code" rules as mentioned in the comments under your question. I decided to skip that and simply deliver an answer based on existing HTML.

Answered By - akds