How to move an element down a litte bit in html

Question

That sounds weird I know, but I am having trouble getting a piece of text to move down a tiny bit so it's centered on the tab it's on.

here's what it looks like:

I want buy to be centered vertically.

Here is the html:

<div class="row-2">
     <ul>
         <li><a href="index.html" class="active">Buy</a></li>
     </ul>
</div>

Answer 1

You can set the line height on the text, for example within the active class:

.active {
    ...
    line-height: 2em;
    ....
}

Answer 2

<div class="row-2">
 <ul>
     <li><a href="index.html" class="active"><p style="margin-top: 10px;">Buy</p></a></li>
 </ul>

Play with it