CSSの親divの中に複数の可変長divを配置する

Question

私は1つの親div内に3つの小さなdivがあります。 2番目（中）のdivは、少し異なる長さのテキスト（月名）を表示するため、可変サイズです。

残りのスペースで最初と3番目の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要素にfloatを与える場合

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

Answer 2

その後、マージン：オートworks.Soは、自動&フロートが同時に動作していないではありません。

Answer 3

まず、ラッパー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>