子div相对于父div居中的解决方法

Html:

<div class="ui-menubar">

　　<div class="mbody">

　　　　<div class="menubutton ">

　　　　　　<div class="buttontitle">Refresh</div>

　　　　</div>

 

　　　　<div class="menubutton">

　　　　　　<div class="buttontitle">Information</div>

　　　　</div>

 

　　　　<div class="menubutton">

　　　　　　<div class="buttontitle">Filter</div>

　　　　</div>

 

　　　　<div class="menubutton">

　　　　　　<div class="buttontitle">Jump to</div>

　　　　</div>

　　</div>

</div>

 

 

现在有个需求：mbody这个div中有n个按钮（menubutton）div。当浏览器窗口大小改变，或者按钮数量增多，减少后。这些按钮还是居中位置。那就需要mbody相对于他的父元素ui-menubar这个div中，居中。

在网上查了下，实现方法如下：

父元素添加css:

.ui-menubar{

　　Width:100%;

　　text-align:center;

}

 

 

子元素mbody添加css:

.mbody{

　　display:inline-block;

　　zoom:1; 

　　*display:inline; 

　　vertical-align:middle;

}

 

如果子div宽度确定可以采用以下方法居中：

div{

　　margin-left:auto;

　　margin-right:auto;

}