Центрирование нескольких элементов div переменной длины в родительском элементе div в CSS - PullRequest
Новая
       6

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

3 голосов
/ 16 января 2011

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

Ответы [ 3 ]

1 голос
/ 18 января 2011

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

0 голосов
/ 18 января 2011

Сначала положите их в упаковочный блок. 

    <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>
0 голосов
/ 18 января 2011

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

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