如何在一个内部垂直对齐2种不同的字体大小<p>

Question

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

Answer 1

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