未知div宽度的水平对齐

Question

我想将div div中的div与水平居中对齐,以获得具有未知宽度和动态内容的div(从用例到用例都要小心.

我已经读过,margin: auto;通常这里通常是解决方案,但它需要一组宽度,这对于我来说是编译时未知的.text-align: center不适用于父div中的div.

小提琴的例子

这是一个小提琴的例子.

我的两个问题

1. 我希望三个圆圈与中间对齐.圆圈数可以从零到多个不等.
2. 另一个相关的问题是我如何使进度条具有最小宽度(例如,当只有一步,两步或三步时)并且在添加更多步骤时向右和向左拉伸？这是油漆中的(非常糟糕)插图.

作为一个注释,我希望这也适用于IE 8.

Answer 1

你想要这样的东西吗？DEMO

.progressbar{
    top: 0; 
    position: fixed; 
    background-color: #00bbee; 
    width: 100%; 
    height: 45px; 
    left: 0;
    text-align:center // added this line for centering the content   
}

.steps {
    display: inline-block; // and this line for auto-aligning center your child elements
}