使用css </div>减小<div>块的宽度

Question

这是我创建的页面：

我想减少橙色作为背景颜色的块的宽度，而不使用属性宽度中的数字，还有其他方法吗？

我试过漂浮：左;并且它工作但它向左移动我希望自动检测宽度，因为文本长度和html页面的中心。

Answer 1

一种解决方案是在div周围添加一个包装元素：

<div id="outer">
    <div id="inner">Vous avez acheté 6 pieces, le total à payer est : 200DH</div>
</div>

然后：

#inner {
    display: inline-block; /* for the background */
}

#outer {
    text-align: center; /* for centering */
}

http://cssdesk.com/Y8SB8

如果div的父级已经有text-align: center，那么包装器是不必要的。

Answer 2

如果你想让它居中，有一个自动宽度，一个选项就是把它当作inline元素。

display: inline;

或：

display: inline-block;

假设父元素有text-align: center，这就足够了。