html - 任何 div 内文本的 css 位置和中心不起作用

Question

我有一个三 Angular 形(使用 css 绘图)，我在三 Angular 形内显示一个数字..但我的号码是动态的(我总是得到不同的号码)。

我希望数字应该与所有不同值的三 Angular 形中心对齐。

我的 HTML :-

<div class="triangle-up"><span class="triangle-up-span">125</span>
</div>
<div class="triangle-up"><span class="triangle-up-span">1</span>
</div>
<div class="triangle-up"><span class="triangle-up-span">1255</span>
</div>
<div class="triangle-up"><span class="triangle-up-span">12</span>

</div>

我的CSS:-

.triangle-up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 36px 38px 36px;
    border-color: transparent transparent #d30000 transparent;
    line-height: 0px;
    left:-10px;
    position:relative;
}
.triangle-up-span {
    text-align: center;
    line-height: 44px;
    position:relative;
}

jsfiddle code here

如果我犯了任何愚蠢的错误，请指导..

Answer 1

Demo

将以下属性添加到 .triangle-up-span

width : 38px;
/* equal to triangle bottom width */
margin-left : -19px;
/* equal to negative of half of triangle bottom width/width of .triangle-up-span */

这里是 .triangle-up-span 的变化的 css

.triangle-up-span {
    text-align: center;
    line-height: 44px;
    position:relative;
    width: 38px;
    display: block;
    margin-left: -19px;
}