how to vertically align the 2 different font sizes inside a single <p>

css, html

Solution

See http://jsfiddle.net/kfVGf/2/

.moduleCard{
    font-size:60px !important;
    padding:0 4px;
    display: inline-block;
    vertical-align: middle;
}

Result:

Note: unless you have a valid reason for it, avoid to use `!important`

Problem

As the title says, how should I vertically align this:- Need: - - | - | - - Currently the vertical alignment is by default at baseline. Currently: _ _ | _ | _ _ HTML: ``` <div class="moduleResult"> <p>You have <span class="moduleCard">88</span> out of <span class="moduleCard">88</span> correct</p> </div> ``` CSS: ``` .moduleResult{ width:100%; } p{ font-family:'Arial'; font-size:20px !important; line-height:30px; text-align:center; } .moduleCard{ font-size:60px !important; line-height:60px; padding:0 4px; } ``` and the text has to be aligned centred inside a < div class"moduleResult" > here's the Fiddle Link

Original source