Vertically Align Middle Div Inside Div Box

Back in old days when I used to use a lot of tables, it was very easy to vertically align anything to middle. Now tables are almost obsolete and we must think about mobile responsive design. Nowadays I use a lot of div boxes for fluid responsive design, then I face a problem with the vertical aligning. valign and vertical-align both does not work when I try to align something to middle. When I google, I find many different solutions for different situations, such as vertically aligning 1 line text or multiple line text or image, etc. I'm sure all work well, however I want a simple almighty solution.

Here's one of the example I want to vertically align left div to middle but the height of the box is not fixed.

Result

Professional
Professional Edition includes following features:

  1. Feature 1, blah blah blah.
  2. And omg this feature too.
  3. Yes, and another feature here.
  4. Last feature is amazing...

For details of each feature, please see this page. (of course link here.)

Enterprise
In addition to all of the Professional features, Enterprise Edition also includes:

  1. Only if you get the Enterprise feature. This must be good.
  2. And to make you happy, I'll throw in just one more feature.

For details of Enterprise Edition, please see this page.

HTML

CSS/JS

In this case, it will look a lot better if Professional and Enterprise are vertically aligned to middle. Easy guess was to add vertical-align property to infoboxheader class, however it's not that easy. I don't know who created the rule but this property "vertical-align" does not vertically align the contents in it. So straight to the point, here are the CSS I always use that vertically align things.

This css is to be added to the contents of the box, not to the div box itself. So in this case I will add it to "Professional" and "Enterprise" and here's the final result.

Result

Professional
Professional Edition includes following features:

  1. Feature 1, blah blah blah.
  2. And omg this feature too.
  3. Yes, and another feature here.
  4. Last feature is amazing...

For details of each feature, please see this page. (of course link here.)

Enterprise
In addition to all of the Professional features, Enterprise Edition also includes:

  1. Only if you get the Enterprise feature. This must be good.
  2. And to make you happy, I'll throw in just one more feature.

For details of Enterprise Edition, please see this page.

HTML

CSS/JS