html让同一行的文字和图片居中对齐显示

实现方法:css属性->vertical-align:middle

给行内的每个内容标签都加上这个属性（注：改属性只对行内元素起作用，如果不是行内元素要加上diaplay:inline-block）；

实现效果如图：（rem布局）

<div class="satisDiv span12 borderB pad10px h44"><span class="fs028rem ">满意度:</span><span class="ml030rem fs028rem">十分满意</span><img class="ml020rem" data-rateLevel="1" src="data:images/applicationForCar/unchooseico.png" width="16px;"><span class="ml030rem fs028rem">满意</span><img class="ml020rem" data-rateLevel="2" src="data:images/applicationForCar/unchooseico.png" width="16px;"> <span class="ml030rem fs028rem">一般</span><img class="ml020rem" data-rateLevel="3" src="data:images/applicationForCar/unchooseico.png" width="16px;"></div>

css:

.satisDiv span,img{padding-left:0;vertical-align:middle;display:inline-block;float: none;
}

html让同一行的文字和图片居中对齐显示相关推荐

div中文字，图片居中对齐，兼容FF、IE
2010年07月21日星期三 20:11 垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用.假设你将一个导航菜单的高度设 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
[转]div 让文字或图片居中
本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让文字或图片居中,请参考以下代码1:- - - - - - - - - - - - - - - - - - ...
Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置...
1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...
文字图片居中html代码,文字和图片居中的HTML代码怎么写？
html文字居中和html图片居中方法代码,通过在html中实现文字居中图片居中篇在html中实现文字图片内容居中有三种方法,其中两种使用CSS样式实现,一直使用原始的html标签内加入"a ...
让文字和图片垂直居中对齐
让文字和图片垂直居中对齐(经常会用的,但是记不住的布局..) 给img和文字所在的父容器设置如下css即可. 1.flex布局 .box{display:flex;align-items: cente ...
html怎样书字居中,HTML代码怎么实现文字和图片居中？
!DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml head meta charset= gb2312 / title W3Cschool居中 ...
字体居中 html代码怎么写,文字和图片居中的HTML代码怎么写？
HTML 代码 ,怎么将文本/ 图片居中?这是在W3Cschool的编程问答中前端♌蕾儿提出的问题.网友施主同西否给出了详细的解答. html文字居中和html图片居中方法代码,通过在html中实现文 ...
html文字居中对齐显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

html让同一行的文字和图片居中对齐显示

html让同一行的文字和图片居中对齐显示相关推荐

最新文章

热门文章