请选择 进入手机版 | 继续访问电脑版

资源299论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

日本代购,韩国代购,专业海外代购服务
查看: 252|回复: 3

DIV+CSS居中之图片与文字同排垂直居中

[复制链接]

2891

主题

3166

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
10614
发表于 2019-3-5 11:31:44 | 显示全部楼层 |阅读模式
先领券再购物更优惠
DIV+CSS居中之图片与文字同排垂直居中
图片,后面跟着是文字段,可见虽然图片与文字在同行,但是文字未上下垂直居中,明显图片垂直居上,文字垂直居下。
DIV+CSS延伸与提高
假如我们设置”.yangshi”的高度和line-height,要想此DIV中内容垂直居中同样我们设置vertical-align:middle即可,CSS代码如下:
.yangshiimg{vertical-align:middle;}
这里值得说明的是高度和line-height一定要大于图片高度,否则也会出现“CSSHACK”在不同浏览器中不兼容情况。

DIV+CSS总结:
1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。
2、文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性,如.yangshiimg{vertical-align:middle;}

云博淘享惠商城,商品多多,优惠券多多,福利多多,转发还能赚零花钱,关注微信公众号“云博淘享惠商城”吧!!
回复

使用道具 举报

0

主题

247

帖子

562

积分

高级会员

Rank: 4

积分
562
发表于 2019-3-29 14:30:23 | 显示全部楼层
先领券再购物更优惠
让人走路吃饭睡觉干什么事连做梦都梦到它的好帖!! 悬浮门 http://www.ssmdd.com
我爱学习啊
回复

使用道具 举报

0

主题

247

帖子

562

积分

高级会员

Rank: 4

积分
562
发表于 2019-4-5 19:55:51 | 显示全部楼层
先领券再购物更优惠
看完楼主的帖子,我的心情竟是久久不能平复!。!! 悬浮门 http://www.ssmdd.com
我爱学习啊
回复

使用道具 举报

0

主题

247

帖子

562

积分

高级会员

Rank: 4

积分
562
发表于 2019-4-6 19:26:09 | 显示全部楼层
先领券再购物更优惠
楼主知道一个网站叫安迪国际么?用度娘SO一下吧。 伸缩门 http://www.ssmdd.com
我爱学习啊
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /3 下一条

QQ|Archiver|手机版|小黑屋|资源299论坛

GMT+8, 2019-11-12 04:08 , Processed in 0.026147 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表