Css不规则背景图片在导航里居中显示

在css导航的制作中，出现个问题，以前做的导航都是左右对称的，只要利用margin:0 auto;就可以实现居中。但这次的图片模板中导航的左边宽，右边窄，如果都当成背景来布局，一眼会感觉这个导航没有在中间。

为了让其视觉上logo和导航菜单所在的白色区域居中，就要用相对定位和绝对定位了。

left-side.pngright-side.png

Html的代码如下：

<div id="msg">
         <div class="left-side"></div>
         <div class="right-side"></div>        
        。。。。。。
</div><!--msg end-->

 

Css代码如下：

#msg{
    float:left;
    width:100%;
    height:130px;
    margin-left:-18px;/*相对于原来的位置改变*/
    position:relative;
    background-color:#fff;
}
.left-side{
    position:absolute;/*相对于父级改变，在此父级为msg*/
    left:-90px;
    background-image:url(images/left-side.png);
    background-repeat:no-repeat;
    width:90px;
    height:130px;
}
.right-side{
    position:absolute;
    right:-70px;
    background-image:url(images/right-side.png);
    background-repeat:no-repeat;
    width:70px;
    height:130px;
}