title: Center multiple variable-length divs within a parent div in CSS
body: <p>I have three small divs that all appear within one parent div. The second (middle) div is variable size, as it will display text of slightly different lengths (month names).</p>
  
  <p>How can I make the the centre div align to the centre of the parent div so that the first and third divs align correctly in the remaining space?</p>
  
  <p>The CSS so far is here (but it doesn't work yet):</p>
  
  <pre><code>div.calendartitle {  //The parent
    display: block;
    width: 117px;
    height: 15px;
    border-style: solid;
    border-color: black;
    font-size: small;
    border-width: 1px;
    text-align: center;
  }
  
  
  div.calendartitleelement {  //The three sub-divs.
    display: block;
    float: left;
    margin-left: auto;
    margin-right: auto;
    width: 38px;
  }
  </code></pre>
  
  <p>The HTML is generated in JS:</p>
  
  <pre><code>var html = "&lt;div class='calendartitle'&gt;";
    html += "&lt;div class='calendartitleelement calendertitleclickable' onclick='buildCalendar(" + previousWeekStartingDay + "," + previousMonth + ");'&gt;&amp;#60;&amp;#60;&lt;/div&gt;";
    html += "&lt;div class='calendartitleelement'&gt;" + months[month] + "&lt;/div&gt;";
    html += "&lt;div class='calendartitleelement calendertitleclickable' onclick='buildCalendar(" + nextWeekStartingDay + "," + nextMonth + ");'&gt;&amp;#62;&amp;#62;&lt;/div&gt;&lt;/div&gt;";
    $("#calendardisplay").prepend(html);
  </code></pre>