Vertically align text in div + line up floated div

HTML & CSS
1

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.


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

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

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

The text looks vertically centred to me but you haven’t aligned the inline-block elements to the top.

Try adding:


.font{
 vertical-align: top;
}

(BTW .font is not a very good class name :slight_smile: )