January 7th, 2013, 01:50 PM
Aligning text with different font sizes
I've been racking my head trying to align this text so that they are flush vertically. Can someone help?
Tried everything I know of and can't align.
<meta charset=utf-8 />
border-top: 2px dashed #ccc;
border-bottom: 2px dashed #ccc;
<a href="#" style="font-size:88px;float:left;width: 351px;">First Text</a>
<a href="#" style="font-size:52px;float:right; height: 57px;">Second Text</a>
Thanks so much....
January 7th, 2013, 03:11 PM
Very good question. Just spent about 20 minutes playing around with different ways but I can only find one. That is to add a margin-top to text which is smaller in size than the one you want it aligned with.
I'm not sure if this is what you want because this is aligning it horizontally whereas you wanted it vertically aligned but you were floating your <a> tags left and right so I just presumed you meant horizontally.
Here is the code:
Does this help at all?
<a href="#" style="font-size:88px;float: left;">First Text</a>
<a href="#" style="font-size:52px; float: right; margin-top: 10px;">Second Text</a>
I'd be eager to see if anyone did get this working correctly. Although this works, if you have variant font sizes than you will have to set each margin individually.
Also, I aligned the second <a> to the top of the first <a>. If you want it aligned to the bottom (which I imagine), just add the extra margin-top.
Let me know!
Last edited by Nanomech; January 7th, 2013 at 03:37 PM.
January 7th, 2013, 04:07 PM
Thanks for the suggestion but received the same result, all is out of alignment.
January 7th, 2013, 04:12 PM
Add extra margin.
Even reducing resolution keeps it inline with the top. Get it aligned to the bottom by adding extra margin-top. Once it's aligned, go up and down a few resolution sizes and check it out. Works pretty well here.
January 7th, 2013, 04:21 PM
Your right. I increased the margin size and it lined up.
Wow! Thank You so much for your help...