现在很多网站都有全屏的横幅图片,这使得它们看起来非常令人印象深刻,这种横幅通常形成一个大图片,然后以不同的分辨率显示图片的中间部分,那么CSS banner居中显示的方法有哪些?中国E盟技术频道小编告诉你!
HTML 结构如下
CSS 样式如下
css;"> body { overflow-x: hidden; } .banner { width: 1210px; margin: 0 auto; } .banner img { width: 1920px; margin: 0 -355px; vertical-align: middle; }
当视口宽度与图片宽度同为 1920 px 时,Nian 糕正好处于视图居中位置,页面效果如下图所示
width:1920px
当视口宽度为 1210 px 时,Nian 糕依旧在视图中居中显示,如下图所示
width:1210px
以上就是CSS banner居中显示的方法有哪些的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中国E盟技术频道。