超大图居中的方法

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

超大图居中的方法

猜你喜欢