SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically align text in div + line up floated div.

    Hi all

    Demo here to illustrate - http://www.ttmt.org.uk/textBox/

    I'm using jquery to add text to a <p> inside a <div> and set them in different fonts.

    I would like the yellow div's to be the same height and the text to centered vertically in the div.

    The div's are also floated so when the window is wider enough I would like them to line up horizontally.

    They don't line up horizontally, is this because the different in text height is pushing them up and down.

    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        body{
          background:#eee;
        }
        
        #wrap{
          overflow:auto;
          max-width:1200px;
          margin:0 auto;
          border-left:20px solid #eee;
          border-right:20px solid #eee;
          padding:20px 0 0 0 ;
        }
        .font{
          margin:0 20px 30px 0;
          display:inline-block;
          1height:150px;
          background:yellow;
        }
        .font p{
          border: 1px solid red;
          1display:inline;
          1height:150px;
        }
        @font-face{
          font-family: CALIBRI;
          src: url('fonts/CALIBRI.TTF')    
        }
        
        @font-face{
          font-family: CORBEL;
          src: url('fonts/CORBELB.TTF')    
        }
        
        @font-face{
          font-family: SourceSans;
          src: url('fonts/SourceSansPro-Light.ttf')    
        }
            
        
      </style>
      
      </head>
      
    <body>
    
      <div id="wrap"></div>
      
      <script>
        
        createFlags = function(){
          
          var text = ['Hello Sailor','Acid Test','Bear Garden','Botch A Job','Dark Horse'];
    
          var fonts = ['CALIBRI','CORBEL','SourceSans','CALIBRI','CORBEL','SourceSans'];
          
          for(var i = 0; i<fonts.length; i++){
            var ranNum = Math.floor(Math.random()*text.length); 
            var flag = $('<div class="font"><p>'+text[ranNum]+'</p></div>').css({'font-family':fonts[i], 'font-size':'7em'})
            $('#wrap').append(flag);
          }
                
        }
            
        createFlags();
        
      </script>
      
    </body>
    
    </html>
    Screen Shot 2013-06-11 at 13.01.55.png

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,622
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If they are all just one line just give the div a line-height equal to the height of the div. Note you have a typo on your div height.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to add any height to div

    I have added the height now and the same line-height but the text still isn't centered and the div's don't line up.

    http://www.ttmt.org.uk/textBox/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    The text looks vertically centred to me but you haven't aligned the inline-block elements to the top.

    Try adding:
    Code:
    .font{
     vertical-align: top;
    }
    (BTW .font is not a very good class name )


Bookmarks

Posting Permissions

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