当前位置: 首页 >> HTML >> 【html】banner图居中的两种方法 >> 正文

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

5年前 (2019-10-08)     作者:Jiaozn     分类:HTML     阅读次数:2804     评论(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所有。 转载请注明出处为“本文转载于『Jiaozn的博客』原地址https://www.jiaozn.com/reed/526.html
0

评论

发表评论   

昵称*

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

网站

分享:

支付宝

微信