当没有指定宽度时，在父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; 
}