Text vertical align inside an anchor (<a>) tag

Question

Sample demo: JSFiddle

<h3><a class="myButton" href="#">Tell Me More &nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-2x"></i></a></h3>

As you can see in my JSFiddle, the text Tell Me More is not vertically center aligned.

How can I do that?

Jenniejennifer

you have 6px padding on top and bottom, but both elements don't have the same height, a quick fix to that is to put a line-height on the text container (anchor tag in that example) of the height of the icon you have on the right, This will center the text probably. jsfiddle.net/ES225/4 – Unthrone

Possible duplicate of Vertical align middle on an inline-block anchor tag – Rennes

Answer 1

Demo Fiddle

Add this CSS content:

.fa
{
   vertical-align: middle;
}

Pediform

thanks . it works. but it won't let me add MARGIN-TOP on myButton class selector. What i mean is MARGIN-TOP don't work. – Jenniejennifer

@Unknownymous : I have updated some codes on my second fiddle. see that above fiddle. margin-top will work now... with margin-top jsfiddle.net/ES225/8 and without margin-top jsfiddle.net/ES225/10 – Pediform

Answer 2

You should use new CSS 3 features, in this case Flexbox.

a,button {
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  display: flex; /* CSS3 */
  align-items: center; /* Vertical align */
  justify-content: center; /* Horizontal align */
  border: 1px solid #000;
}

<a href="#"><span>Testing 1,2,3</span></a>
    <button><span>Testing 1,2,3</span></button>

It is as simple as that.

All browsers support it. See caniuse.com/#search=flex.

Also check out the free and excellent course flexbox.io/. He is the best teacher at this.

Also check out css-grid, also new in CSS 3.

Logjam

As soon as the text wraps, it will be left aligned in this sample – Malherbe

Answer 3

.myButton {
    display: inline-block;
    vertical-align: middle;
}

.fa {
    vertical-align: middle;
}

Oh sorry, right now margin works even if you apply them to the .myButton.

Rockweed