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>

Solution 1

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

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

Solution 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

Solution 3

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!

Solution 4

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

Solution 5

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.

View more solutions

Comments

[bradley.ayers]

What happens if the user changes their text size?

[bradley.ayers]

What happens if the user changes their text size?

[novicePrgrmr]

tried that and it made the tab bigger, text stayed in the same place

[bradley.ayers]

That means you've probably used the wrong approach to style the tabs. What My Head Hurts suggested is the best way to do this.

[StepUp]

How it can be done? Is it correct line-height:100%;?

[John Gilmer]

This helped me. I had a situation where I had several links in a table cell td and wanted to move one of them down a bit.