超大图居中的方法

时间:2026-02-18 11:27:14

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、效果

超大图居中的方法

© 2026 一点经验网
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com