My question is, how can I vertically align the following:
Goal: - - | - | - -
Currently, the vertical alignment defaults to baseline.
Current Alignment: _ _ | _ | _ _
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;
}
The text must be centered inside a < div class"moduleResult" >
Here's the Fiddle Link