Центрировать несколько div переменной длины внутри родительского div в CSS

У меня есть три небольших 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);

html css center
person Will Gill    schedule 16.01.2011    source источник
comment
средний не изменяется по ширине, так как вы указали ему ширину 38 пикселей в своем css. Кроме того, если родитель имеет фиксированную ширину, а левая и правая имеют фиксированную ширину, оставшаяся ширина также является фиксированной. Возможно, вы захотите добавить text-align: center; если вы хотите центрировать текст внутри среднего div.   -  person Gerben    schedule 16.01.2011

Ответы (3)


arrow_upward
0
arrow_downward

Вы не должны использовать float left со свойствами центрирования, такими как margin auto. Сделай это.

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

arrow_upward
1
arrow_downward

если вы даете float div, то margin:auto не работает. Таким образом, auto и float не работают одновременно.

person sandeep    schedule 18.01.2011

arrow_upward
0
arrow_downward

Сначала поместите их в обертку div.

    <div class="wrapper">
<ul class="menu clearfix">
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
</ul>
</div>

<style>
.wrapper {
    text-align: center;
}

.wrapper .menu {
  display: inline-block;
  *display: inline; /* ie6/7 hack for display inline, haslayout property */
}

.wrapper .menu li {
  float: left;
}

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
</style>
person kuyabiye    schedule 18.01.2011