京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

jquery.valign插件实现图片,文字上下左右垂直居中

此前给大家推荐了一个纯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

下载方法:
1、请用微信扫描下方二维码关注时代Java公众号,或者微信搜索时代JavaNowJava关注。
    (如已经关注,请直接发送编号)
2、在时代Java公众号里发送编号:5202
5202
3、发送后,将立刻收到 “验证码已经接收成功” 的回复,即可选择线路下载:
通用网络下载移动网络下载电信网络下载

本文系作者在时代Java发表,未经许可,不得转载。

如有侵权,请联系nowjava@qq.com删除。

编辑于

关注时代Java

关注时代Java