The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Simple vertical alignment solution

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #27465

    My boss asked me to make same area always stay vertical centered regardless how much text was in the box. I know we tend to cringe when vertical alignment comes up but it sounded like a fun challenge. Since it has plagued me I thought I would throw up this tip/trick to anyone else trying to get the same result. note: I know you can use other elements besides div here. I’m just using div for the example.


    Title Shown Here
    Text shown. Use multiple lines as you please.

    CSS (concept could work with or without a pre-defined height)

    background-color: red;
    color: #ffffff;
    width: 300px;
    height: 400px;

    font-size: 1.8em;

    font-weight: bold;


    var titleHeight = $(‘#title’).height();
    var textHeight = $(‘#text’).height();
    var containerHeight = $(‘#container’).height();
    var dynamicPadding = (containerHeight-(titleHeight + textHeight))/2;


    This forces the the title and text to be directly center every time. I’m sure others have used this concept but thought I would share. it works great and I haven’t had any odd issues with it.

    Let me know what you guys think about this concept.

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.