在CSS中的父div中居中多个可变长度div [英] Center multiple variable-length divs within a parent div in CSS

问题描述

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

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).

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

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?

CSS到目前为止在这里（但它还不工作）：

The CSS so far is here (but it doesn't work yet):

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中生成：

The HTML is generated in 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);

推荐答案

保证金自动。做这个。

You should not use float left with centering properties such as margin auto. Do this.

div.calendartitleelement {  //The three sub-divs.
  display: block;
  margin:0px auto;
  min-width: 38px;
}

这篇关于在CSS中的父div中居中多个可变长度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！