Aligning text with different font sizes

Dev Shed Forums Sponsor:

January 7th, 2013, 01:50 PM

thehoser

Registered User

Join Date: Jan 2013

Posts: 3

Time spent in forums: 26 m 19 sec
Reputation Power: 0

New Member - Aligning text with different font sizes

Hello Everyone,

I've been racking my head trying to align this text so that they are flush vertically. Can someone help?

Code:

 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<style>
  .di {
       border-top: 2px dashed #ccc;
      border-bottom: 2px dashed #ccc;
        height: 103px;
    }

</style>
</head>
<body>
  
  <div class="di">

          <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>

  </div> 
</body>
</html>

Tried everything I know of and can't align.

Thanks so much....

Best Regards

January 7th, 2013, 03:11 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

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:

Code:

<div class="di">
	<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>
</div>

Does this help at all?

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!

Regards,

NM.

__________________
"WERE NOT WORTHY!"

"WERE NOT WORTHY!"

Last edited by Nanomech : January 7th, 2013 at 03:37 PM.

January 7th, 2013, 04:07 PM

thehoser

Registered User

Join Date: Jan 2013

Posts: 3

Time spent in forums: 26 m 19 sec
Reputation Power: 0

No dice

Thanks for the suggestion but received the same result, all is out of alignment.

Best Regards

January 7th, 2013, 04:12 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

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.

Regards,

NM.

January 7th, 2013, 04:21 PM

thehoser

Registered User

Join Date: Jan 2013

Posts: 3

Time spent in forums: 26 m 19 sec
Reputation Power: 0

Your right. I increased the margin size and it lined up.
Wow! Thank You so much for your help...

Best Regards

New Member - Aligning text with different font sizes

Developer Shed Advertisers and Affiliates