在背景图像上居中文本

Question

我有一张背景图片。它包含另一个显示总价格。

Live demo

当设备屏幕较小时，要显示的数字0位于背景图像的中间和底部的中心位置：

当我调整屏幕大小（更大）时，数字不再像第一个屏幕截图那样显示：

在将屏幕尺寸调整为与第一张照片相同的宽度后，如何显示0？

Answer 1

我建议给0-div一个静态宽度：

    .total{
 position:absolute;
 background-color:aqua;
 font-weight: bold;
 font-size:10px;
 text-align:center;
 width: 40px;    <---- 
 left: 5%;
 bottom:14px;
}

Answer 2

添加此

.divThree:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

并更改.total

.total{
    background-color:aqua;
    font-weight: bold;
    font-size:10px;
    text-align:center;
    width: 90%;
    vertical-align: middle;
    display: inline-block;
}

Working Fiddle