html - 居中具有 2 种不同字体大小的段落

Question

我正在尝试将具有跨度样式的段落类居中，其中跨度类具有不同大小的字体，并且导致我的段落类不能完全居中，因为它离右侧稍微太远了（我很确定这就是原因）。这是我的 HTML：

<p class="priceWrap"><span class="moneySign">$</span>60000.50</p>

这是我的CSS：

.priceWrap {
text-align: center;
font-size: 20px;

.moneySign{
font-size: 14px;
vertical-align: text-top;
}

Answer 1

实际上它看起来还不错，或者至少我没有得到真正的问题。看看小提琴

--> 小提琴 <--

我意识到您的 .priceWrap 缺少 }，也许这就是导致您的问题的原因。

Answer 2

你有关闭的 .priceWrap 类

<style>
    .priceWrap {
    text-align: center;
    font-size: 20px;
    }

   .moneySign{
   font-size: 140px;
   vertical-align: text-top;
   color:red;
    }
</style>

Answer 3

你必须使用

 line-height

对于您的子元素：

.moneySign{

 line-height: 20px;
 font-size: 10px;
 vertical-align: text-top;
 }

现在你会得到垂直居中的美元符号，在段落高度的一半处

http://jsfiddle.net/kul_mi/vqC9Q/ - 工作示例

Answer 4

我增加了大小，以便您可以看到文本居中对齐。

<style>
    .priceWrap {
        text-align: center;
        font-size: 100px;
    }

    .moneySign{
        font-size: 15px;
        color:red;
        text-align: center;
        vertical-align: middle;
    }
</style>