CODEWITHSUNDEEP
htmlcss
Vel Murugan S
Vel Murugan S

Reputation: 580

Vertical align middle for h3 tag not working

Here is what I need the output to be.

enter image description here

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 :(

Upvotes: 3

Views: 11863

Answers (3)

Joseph Orlando
Joseph Orlando

Reputation: 183

Why don't you just use font-style on a span:

<span style="font-size:large;bold,etc.">

Make the span look like an h3, etc. It might not look 100% unless you have made modifications to the h3 already (thus changing the standard h3 css configuration)

Upvotes: 0

cronoklee
cronoklee

Reputation: 6712

One way to do it is to wrap everything in a new tag and apply display:table to it. The h3 elements should then be set to display:table-cell

Like this:

http://jsfiddle.net/QSjM3/

Having said that, I do agree that three h3 tags in a row is unusual so you should consider re-structuring your markup

Upvotes: -1

Edper
Edper

Reputation: 9322

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 ;-)

Upvotes: 2

Related Questions