未知div宽度的水平对齐

Question

我想将父div中的div与水平居中对齐具有未知宽度和动态内容的div（从用例到使用案例会很谨慎。

我已经读过margin: auto;通常在这里通常是解决方案，但是它需要一组宽度，这对我来说是编译时未知的。 text-align: center对父div中的div无效。

小提琴示例

这是Fiddle example。

我的两个问题

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
}

Answer 2

您的第一个问题可以通过申请来解决 text-align: center到顶部包装器并将步骤包装器的display更改为inline-block

关于第二个问题，我不确定这是否正是您的意思 - 但可以通过将线条移出步骤包装并使用<将其定位在整个条形的垂直中心来解决/ p>

position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;

this fiddle

中的示例

请注意，我也更改了你的HTML，因为那里有一些不必要的标签

对于IE8支持，请查看this question（这里唯一有问题的问题是使用inline-block