超大图居中的方法

2025-11-04 15:13:17

1、使用绝对定位

html代码

<div class="wrap">

    <div class="banner"><img src="img1.jpg"/></div>

</div>

2、css代码

.wrap{width:100%;overflow:hidden;}

.banner{width:1920px;margin-left:-960px;left:50%;position:relative;}

3、效果

超大图居中的方法

超大图居中的方法

4、使用相对定位

html代码

<div class="bannerbox">

        <div class="banner">

            <img src="img1.jpg">

        </div>

    </div>  

5、css代码

 .wrap { width:100%;position:relative; overflow:hidden; height:470px; }

.banner {width:1920px;position:absolute;  left:50%; margin-left:-960px;}

6、效果

超大图居中的方法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢