此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果
今天特意在网上找到了一款插件—jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法:
1、调用jquery库以及本插件
2、jquery方法调用,如本案例第22、23行
使用说明:
外侧div容器必须固定高度,否则js无法判断距离。
控制图片(文字)外侧的html代码,如本例中的span标签,不能是内联,如是,则必须写成块状,例如11行 虽然调用图片、文字的方法一样,但是建议分开写css、js以及调用方法,不然会出现js判断高度bug问题 方法简单实用,兼容性良好。
例如调用方法:
$('.main span').valign({'unit':'px','valignTo':'middle'});
也可写成
默认居中:$('.main span').valign();
亦可控制内容顶部、中部、底部 分别是 top middle bottom
文章来自Vivi源码http://www.vxiaotou.com转载请注明出处,并保留本链接,谢谢!
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- Vivi资源网