当我们使用bootstrap的图片轮播功能,想做一个比较漂亮的页面,如果图片比较小,会发现一个比较尴尬的问题:图片没有居中,如下所示
第一种解决方法,把图片的宽度设计为%100,但是图片会变得非常模糊,代码如下:
效果如下:
第二种解决方法,结合div和img的属性解决该问题,将div的text-align属性设置为居中,将图片的display属性设置为行内块值。
效果如下:
全部代码如下:
备注:2000代表每两秒换一次图片。(本文为了简洁,bootstrap引入代码没有展示,请自行导入相关配置)