PC中大banner图的水平居中的方法

最新推荐文章于 2022-05-02 15:25:44 发布

乔的大明

最新推荐文章于 2022-05-02 15:25:44 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43296918/article/details/95191869

css(3) 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了PC页面中banner图水平居中的方法。banner图像素大、分辨率高，需在PC页面实现水平居中显示，还提及了两种方法，其中第二种被推荐使用。

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

banner图的水平居中的方法

banner图往往往是很大的像素的，也就是分辨率。但是我们在pc页面是要做到水平居中显示的。

The first

<!--html-->
<div class="banner">
			<img src="./img/111.png" alt="banner"> 
</div>

<!--css-->
.banner {
    	width: 100%;
    	position: relative;
    	overflow: hidden;
    	height: 325px;//设置高度
        background: #FF4351;//背景图的颜色
		}
.banner img{
        	width: 1440px;
        	position: absolute;
        	left: 50%;
        	margin-left: -720px;
        	top: 0;
}

//使用子绝父相的方法，图片设置left为50%，margin为图片的负一半。

The second（推荐使用）

<!--html-->
<div class="banner">
</div>

<!--css-->
.banner {
        margin-top: 62px;
        height: 1130px;
        width: 100%;
        background: url("../img/banner-photo.jpg") no-repeat center top;
        background-size: auto 100%;
	   }