html如何让⽂字图⽚同⾼,css⾥图⽚和⽂字如何等⾼
css⾥设置图⽚和⽂字等⾼的⽅法：1、添加css属性“vertical-align:middle;”；2、将图⽚和⽂字分别套上⼀个div，然后利⽤margin属性实现图⽚和⽂字等⾼效果即可。
本教程操作环境：windows7系统、css3版本、Dell G3电脑。
CSS 让同⼀⾏的图⽚和⽂字对齐
⼤家在做前端开发的时候那，经常会遇到img标签和⽂字在同⼀⾏。
那么我刚开始的时候那是利⽤的float浮动布局解决的，定位布局(兼容性需要调整 不划算)下⾯给⼤家介css设置文字垂直居中
绍⼀些其他的⽅法：
1.添加CSS属性：vertical-align:middle;
代码：
a img{border:none} .testdiv *{ vertical-align:middle; }
这⾥是⽂字，看看⽂字对齐了没
设置各对象的vertical-align属性， 属性说明 ：baseline－将⽀持valign特性的对象的内容与基线对齐
sub－垂直对齐⽂本的下标
super－垂直对齐⽂本的上标
top－将⽀持valign特性的对象的内容与对象顶端对齐
text-top－将⽀持valign特性的对象的⽂本与对象顶端对齐
middle－将⽀持valign特性的对象的内容与对象中部对齐
bottom－将⽀持valign特性的对象的⽂本与对象底端对齐
text-bottom－将⽀持valign特性的对象的⽂本与对象顶端对齐
2.div嵌套：将图⽚和⽂字分别套上⼀个div，就可以利⽤ margin 熟悉任意定位了
代码：
a img{border:none} .testIMG{ float:left; display:inline; margin-top:0; margin-left:5px; } .testTXT{ float:left; display:inline; margin-top:20; margin-left:5px; }
这⾥是⽂字，看看⽂字对齐了没
3.把图⽚作为背景：
如果你的图⽚只是⽤来作为⼩图标放在⽂字的左侧，那就推荐⽤这个⽅法，图⽚设置成⽂字的背景，不循环，定位在左侧上下居中，⽂字向左padding图⽚的宽度加⼏个像素。
代码：
这⾥是⽂字，看看⽂字对齐了没

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。