css - 在 CSS 的父 div 中居中多个可变长度的 div

Question

我有三个小的 div，它们都出现在一个父 div 中。第二个(中间)div 是可变大小的，因为它将显示长度略有不同的文本(月份名称)。

如何使中心 div 与父 div 的中心对齐，以便第一个和第三个 div 在剩余空间中正确对齐？

目前的 CSS 在这里(但还不能用):

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;
}

HTML 在 JS 中生成:

var html = "<div class='calendartitle'>";
  html += "<div class='calendartitleelement calendertitleclickable' onclick='buildCalendar(" + previousWeekStartingDay + "," + previousMonth + ");'>&#60;&#60;</div>";
  html += "<div class='calendartitleelement'>" + months[month] + "</div>";
  html += "<div class='calendartitleelement calendertitleclickable' onclick='buildCalendar(" + nextWeekStartingDay + "," + nextMonth + ");'>&#62;&#62;</div></div>";
  $("#calendardisplay").prepend(html);

Answer 1

如果您将 float 赋予 div，则 margin:auto 不起作用。因此，auto 和 float 不会同时起作用。