Выровнять по центру дочерние элементы div внутри родительского элемента div, если ни один из них не указывает ширину

Question

Я хочу центрировать контейнерный контейнер внутри другого 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; 
}