html主题居中,【html】banner图居中的两种方法

【html】banner图居中的两种方法

2年前 (2019-10-08)    作者:Jiaozn    分类:HTML    阅读次数:837

评论(0)

第一种方法:

就是直接插入图片，给图片定义一个class，若是定义margin{0，auto;}的话，

在浏览器中预览，缩放到50%，我们会发现将大banner图会在左边，是不会居中的哦！

对于class的banner我们要经过如下定义{ position:relative; left:50%; margin-left:-960px; width:1920px; }margin-left的值就是图片大小的一半，left要定义个50%。如下定义：

我们然后再浏览器中预览，会发现图片就居中的了哦！还需要注意，要给banner图一个相对定位哦！

第二种方法：

将banner图定义为背景哦！首先要给图片定义个class 然后给class定义背景图 background。若只是这样定义的话，图片不会居中的哦，在左边显示。

这种方法居中比较简单，只需要给背景图定义个 margin{0 auto;}就可以了。这样图片就居中了！

除非注明，发表在“Jiaozn的博客”的文章『【html】banner图居中的两种方法』版权归Jiaozn所有。

猜你喜欢

评论

发表评论   取消回复

昵称*

E-mail*(建议输入，以便收到博主回复的提示邮件)

网站