Question

我正在尝试将一个带有span样式的段落类置于内部，其中span类具有不同大小的字体，并且导致我的段落类不能完全居中，因为它稍微偏向右边（I'我很确定这是原因）。这是我的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

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

--> The fiddle <--

我意识到你的.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>

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

4 个答案: