[html] How to move an element down a litte bit in html

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>

Try it like this:

.row-2 ul li {
    margin-top: 15px;
}

You can use vertical-align to move items vertically.

Example:

<div>This is an <span style="vertical-align: -20px;">example</span></div>

This will move the span containing the word 'example' downwards 20 pixels compared to the rest of the text.

The intended use for this property is to align elements of different height (e.g. images with different sizes) along a set line. vertical-align: top will for instance align all images on a line with the top of each image aligning with each other. vertical-align: middle will align all images so that the middle of the images align with each other, regardless of the height of each image.

You can see visual examples in this CodePen by Chris Coyier.

Hope that helps!

It's simple, just use:

<br />

<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

<style>
.row-2 UL LI A
{
  margin-top: 10px;  /* or whatever amount you need it to move down */
}
</style>

A simple way is to set line-height to the height of the element.

You can use the top margin-top and adjust the text or you could also use padding-top both would have similar visual effect in your case but actually both behave a bit differently.