center - 如何居中增长的文本css

Question

大家好，这是我第一次在这里发帖，

我的问题是：在我的购物车的中心，我有显示购物车中产品数量的数字，现在我该如何做一个中心点，以便当购物车的中心有 1 个产品或 100 个产品时？

简而言之：我如何使不断增长的文本（数字）保持在我的购物车图像的中心？

我已经在购物车上使用了这个 CSS：

position: fixed;
top: 85px;
left: 64px;
font-size: 40px;
z-index: 4;
color: #000;

任何帮助都会非常感谢您的阅读。

Answer 1

如果你想居中，你应该使用text-align:center;

Answer 2

我不确定您希望它以哪种方式居中（可以是水平的或垂直的），但我在这里发布了一个涵盖这两种情况的小提琴：

小提琴：http : //jsfiddle.net/BDqbJ/

代码：

HTML：

<div id="shopping_cart">
    <span id="cart_items">50</span> 
</div>

CSS：

#shopping_cart{
    width: 128px;
    height: 128px;
    background: url(http://www.onlinetemplates.org/images/shop_cart_stic.png) no-repeat;
    display: table;
    border: 2px solid black;
}

#cart_items{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: red;
    font-size: 40px;
}

结果：