title: Center left-aligned child divs within a parent div when none specify widths
body: <p>I want to center a container div within another div, and the child divs of the container need to also be centered, but left-aligned with each other.  The child divs are of variable and unpredictable width. </p>
  
  <p>For example:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="container"&gt;
          &lt;div class="child"&gt;&lt;img /&gt;Text&lt;/div&gt;
          &lt;div class="child"&gt;&lt;img /&gt;Text Widest&lt;/div&gt;
          &lt;div class="child"&gt;&lt;img /&gt;T&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I found a solution that works in Firefox, but need a universal solution.  I also considered using JavaScript to measure the images, text, and div's, but am confident that I'm just CSS ignorant and there is a simple, elegant solution.  Here is what works just in Firefox:</p>
  
  <pre><code>.container {
      width: -moz-max-content;
      margin: 0px auto 0px auto;
      border-style: solid;
  }
  
  .child {
      border-style: solid;
      margin: 0px auto 0px auto;
  }
  </code></pre>