如何实现不同尺寸通屏轮播图的居中显示
2017-02-20 · 诚信经营，以人为本，客户致上！
广州速推信息科技有限公司
文芳阁传媒是一个专业在网络上承接企业，个人软文代写以及软文推广的平台。以低价格把新闻发布在新浪、网易、新华、凤凰、腾讯、央视等3000家门户及地方网站媒体，以塑造公司品牌的知名度和公信力.
向TA提问
关注
![]()
展开全部
网页制作过程中少不了轮播图的使用，为了使banner图在不同分辨率的屏幕上都能通屏显示，我们会把banner图做成2000像素的宽度。
一般将banner写成如下结构：
<ul>
<li><img src="images/banner1.jpg"></li>
<li><img src="images/banner2.jpg"></li>
<li><img src="images/banner3.jpg"></li>
</ul>
为了让banner图左右居中显示，我们可以给<ul></ul>加绝对定位，设置属性{ left:50%; margin-left:600px;}。600px是图片宽度的一半，如果图片宽度有变化，应对照修改数值。这种情况下，当我们应用时会发现这个方法是存在问题的，由于屏幕宽度不够，浏览器的窗口会出现横向的滚动条，这样做会导致用户体验很不好。
一般将banner写成如下结构：
<ul>
<li><img src="images/banner1.jpg"></li>
<li><img src="images/banner2.jpg"></li>
<li><img src="images/banner3.jpg"></li>
</ul>
为了让banner图左右居中显示，我们可以给<ul></ul>加绝对定位，设置属性{ left:50%; margin-left:600px;}。600px是图片宽度的一半，如果图片宽度有变化，应对照修改数值。这种情况下，当我们应用时会发现这个方法是存在问题的，由于屏幕宽度不够，浏览器的窗口会出现横向的滚动条，这样做会导致用户体验很不好。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
