Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Best way to verticaly align two fonts with two diferent sizes

    Say you have a font-size of 1.5 em floated left and a font size of 1em floated right. How would you align both pieces of text so they are both aligned in the middle vertically?

    I say "How would you," because i want to see how multiple people would approach it.
    Thanks!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there stevenmw,

    here is one possible solution...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Text left and right aligned, vertically centered</title>
    
    <style type="text/css">
    body {
        font-family:arial,helvetica,sans-serif;
        font-size:1em;
        background-color:rgb(241,241,241);
     }
    #box {
        display:table;
        width:40em;
        border:0.1em solid rgb(196,196,196);
        margin:auto;
        background-color:rgb(255,255,255);
        box-shadow:1em 1em 1em rgba(0,0,0,0.6);
     }
    #box div {
        display:table-cell;
        height:10em;
        padding:0.5em;
        vertical-align:middle;
     }
    #box span {
        background-color:rgb(204,204,204);
     }
    #left-text {
        font-size:3.2em;
    
    /* line-height value is (#right-text font-size x 1.25)/ #left-text font-size  */
    
        line-height:2.15em;
    
     }
    #right-text {
        float:right;
        font-size:5.5em;
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    
    <div>
     <span id="left-text">- qwerty - </span>
     <span id="right-text">- qwerty - </span>
    </div>
    
    </div><!--end #box -->
    
    </body>
    </html>
    coothead

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Thanks, I am currently just using something like this.

    Code:
    .test {
     background-color: red;
     height: 40px;
     display:table-cell;
     vertical-align:middle;
      }
    Thanks!

  • #4
    Regular Coder
    Join Date
    May 2012
    Location
    USA
    Posts
    102
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Try vertical-align:middle; on inline containers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •