当没有指定宽度时，将左对齐的子 div 置于父 div 中居中

Question

我想将一个容器 div 放在另一个 div 中居中，并且该容器的子 div 也需要居中，但彼此左对齐。子 div 的宽度是可变且不可预测的。

例如：

<div>
    <div class="container">
        <div class="child"><img />Text</div>
        <div class="child"><img />Text Widest</div>
        <div class="child"><img />T</div>
    </div>
</div>

我找到了一个适用于 Firefox 的解决方案，但需要一个通用的解决方案。我也考虑过使用 JavaScript 来测量图像、文本和 div，但我相信我只是 CSS 无知，而且有一个简单、优雅的解决方案。以下是仅在 Firefox 中有效的方法：

.container {
    width: -moz-max-content;
    margin: 0px auto 0px auto;
    border-style: solid;
}

.child {
    border-style: solid;
    margin: 0px auto 0px auto;
}

Answer 1

.container {
   display: table; 
   margin: 0 auto; 
}
.container > .child {
  display: table-cell; 
}