首页 > 网页制作 > CSS > 正文

CSS banner居中显示的方法有哪些

时间:2018年12月26日
现在很多网站都有全屏的横幅图片,这使得它们看起来非常令人印象深刻,这种横幅通常形成一个大图片,然后以不同的分辨率显示图片的中间部分,那么CSS banner居中显示的方法有哪些?爱站技术频道小编告诉你!

现在很多网站都有全屏的横幅图片,这使得它们看起来非常令人印象深刻,这种横幅通常形成一个大图片,然后以不同的分辨率显示图片的中间部分,那么CSS banner居中显示的方法有哪些?爱站技术频道小编告诉你!

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居中显示的方法有哪些的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱站技术频道。

上一篇:浅谈CSS三栏布局的N种实现

下一篇:详解CSS 动画技巧与细节

相关阅读

爱站科技 ©2017版权所有 免责声明 粤ICP备13073302号-3 粤公网安备 44030302000085号 热门关键词