Vertical align middle for h3 tag not working

Question

Here is what I need the output to be.

HTML Markup is:

<h3 class="TRM_Propane_sfty_ttl">Placement of Your Grill &amp; Propane Cylinders</h3>
<h3 class="TRM_Propane_sfty_ttl">Use of Your Grill</h3>
<h3 class="TRM_Propane_sfty_ttl">Other Propane Cylinder Safety Tips</h3>

What is the CSS I should apply to the h3 tag, so that the text "Use of Your Grill" will be vertically aligned at middle? I should n't use specific line height for the second h3 tag.

I tried display: table, table-cell, table-head. Nothing worked :(

Answer 1

h3 is block level (that is the next element will go to the next line) so one way is to make that inline (like span element).

.TRM_Propane_sfty_ttl 
 {display:inline;}

in your CSS.

Check my demo with table also by the way is used.

And without using h3 element you could also make your font look bigger like this one and your code a little tidier ;-)