#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep Power
    0

    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
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    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.
    Last edited by Nanomech; January 7th, 2013 at 03:37 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep Power
    0

    No dice


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

    Best Regards
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    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.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    3
    Rep Power
    0
    Your right. I increased the margin size and it lined up.
    Wow! Thank You so much for your help...

    Best Regards

IMN logo majestic logo threadwatch logo seochat tools logo