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

最新推荐文章于 2023-12-13 13:45:50 发布

weixin_33885253

最新推荐文章于 2023-12-13 13:45:50 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hyfhxz/p/4883786.html

本文探讨在CSS导航制作中遇到的问题，即如何将图片模板中宽度不一致的导航居中显示。通过采用相对定位和绝对定位策略，实现了logo和导航菜单所在白色区域的视觉居中效果。提供了HTML和CSS代码示例，详细解释了布局调整的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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;
}