Menu icon Foundation
How to Align <a> on Emails 2

Hi,

I would like to align an anchor to the right, but it's not possible with "text-right" class. 

If I add a <p> inside the anchor, then the whole column will have the anchor, which is not the idea.

Any clues?

Thanks!

emailalignanchor

Hi,

I would like to align an anchor to the right, but it's not possible with "text-right" class. 

If I add a <p> inside the anchor, then the whole column will have the anchor, which is not the idea.

Any clues?

Thanks!

This post has been closed. No new replies can be added.

Shakogun over 3 years ago

What kind of element do you want to align to the right?

Santiago Valdes over 3 years ago

Hello Shakogun,

 

I want to align an anchor, <a> to the right. 

 

Thanks!

Corey Schaaf over 3 years ago

on your anchor write: 

<a href="http://foundation.zurb.com" style="text-align:right;">Anchor</a>

Corey Schaaf over 3 years ago

That will only make a right justified column. The information inside the column will still be left justified. A style="text-align:right;" will justify the copy to the right if you place it on an anchor or a span or a p tag. 

Santiago Valdes over 3 years ago

Thank you both for your answers. 

Corey: is that supported on most email browsers? I don't want it to work only on "some".

Shakogun: that does the trick but not perfectly. I tried that before but it looks weird, because it's right but not completely.

Rafi Benkual over 3 years ago

`<a>` elements are display inline by default. A block level element allows to for text alignment (left, right, center).

So wrapping the `<a>` in a `<p>` would work this way

<p class="text-right"><a href="">Text</a></p>

Rafi Benkual over 3 years ago

I agree with Corey - Seems to line up perfectly this way

Have a screenshot of the issue you're seeing?

 

Shakogun over 3 years ago

Yeah, you guys' solution is better, that's why I deleted my solution. Way more lines of code too.
I learnt something new too :)

Santiago Valdes over 3 years ago

Thank you guys. That did the trick!