html - 如何在单个 <p> 中垂直对齐 2 种不同的字体大小

Question

正如标题所说，我应该如何垂直对齐:-

需要:- - | - | - -

目前垂直对齐默认为基线。

目前:_ _ | _ | _ _

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

并且文本必须在

内居中对齐

这是 Fiddle Link

最佳答案

参见 http://jsfiddle.net/kfVGf/2/

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

---

结果:

---

备注:unless you have a valid reason为此，避免使用 !important

关于html - 如何在单个 <p> 中垂直对齐 2 种不同的字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21112799/

Answer 1

参见 http://jsfiddle.net/kfVGf/2/

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

---

结果:

---

备注:unless you have a valid reason为此，避免使用 !important