块内或者行内图片与文字居中对齐最靠谱的方式!

做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码

首先是html:

<p class="btnUp"><img src="img/icon_gas_72X72@2x.png"><span>下载云门APP</span></p>

再来看css:

.btnUp img{
height: 72px;
}
.btnUp span{
display: inline-block;
height: 72px;
line-height: 72px;
vertical-align: top;
}

最后的效果图如下:

【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!的更多相关文章

  1. css中块元素和行内元素区别

    行内元素特点 1.和其他元素都在一行上: 2.元素的高度.宽度.行高及顶部和底部边距不可设置: 3.元素的宽度就是它包含的文字或图片的宽度,不可改变. 块元素特点 1.每个块级元素都从新的一行开始,并 ...

  2. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  3. HTML5[8]: 图文混排,图片与文字居中对齐

    <img src="image.png"><span>999</span> img { /* ...  */ vertical-align: t ...

  4. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  5. 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题

    图片.文字混排: 不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置. 此方法兼容IE7+ 和其它主流浏览器.IE7-没有测. inline-block ...

  6. css笔记12:块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

  7. HTML块元素,行内元素,类,头部元素

    总结HTML块元素,行内元素,类,头部元素 块元素: 在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽.默认情况下,块级元素会独占一行,并且元素前后行留空. 示例:<h1&g ...

  8. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  9. html——行内元素、块元素、行内块元素

    行内元素:span  ,a,  ,strong , em,  del,  ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...

随机推荐

  1. js 动态绑定解绑事件

    function addEvent(obj, type, handle) { if (obj.addEventListener) { obj.addEventListener(type, handle ...

  2. 【报错】解决logstash tracking_column not found in dataset. {:tracking_column=>"updated_time"}问题

    今天用logstash同步数据库记录到elasticsearch时候出现错误,错误信息如下: [2019-10-12T23:51:00,529][WARN ][logstash.inputs.jdbc ...

  3. Rsync备份服务实战

    目录 Rsync备份服务实战 一.Rsync 二.rsync的应用场景 1.Rync的数据同步模式 2.rsync的三种模式 三.rsync配置服务端客户端 四.rsync实战 实战一 报错解决方法: ...

  4. git小乌龟图标不显示 windows系统

    1.修改注册表[windows + R 输入 regedit]进入注册信息,按照步骤找到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...

  5. sql格式化时间

    sql格式化date类型 DATE_FORMAT(nuw(), '%Y-%m-%d') sql格式化long类型时间 FROM_UNIXTIME(time/1000,'%Y-%m-%d')

  6. Win10桌面图标显示不正常变成了白色

    开机不知道什么原因,windows 10 桌面图标全部变成了白色,软件是可以点击正常打开使用,但是看着特别不爽.今天就告诉大家一种办法,解决这种问题. 解决步骤 1.在桌面右键新建 "文本文 ...

  7. 2PC和3PC

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484077.html 2PC 是计算机网络尤其是在数据库领域内,为了使基于分布式系统架构下的所有节点 ...

  8. JAVA 输入输出程序开发

    参考: java中 静态方法和非静态方法的区别 字符流的输入和输出 java文件创建.删除.读取.写入操作大全 Java键盘输入并且写入文件 File类的isDiretory Java统计子串在字符串 ...

  9. springDataRedis 依赖

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  10. PHP curl_multi_init函数

    curl_multi_init — 返回一个新cURL批处理句柄 说明 resource curl_multi_init ( void ) 允许并行地处理批处理cURL句柄. 参数 此函数没有参数. ...