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

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

首先是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. 企业微信上传 带中文名称的 临时素材资源 报错 44001:empty media data

    错误原因:urllib3的老版本bug,卸载掉 requests,urllib3,从新安装最新版的requests(此包内部依赖urllib3): 我从新安装的是 requests==2.22.0 及 ...

  2. 自动化运维工具ansible简单介绍

    ansible架构图 ansible安装(centos7环境下) yum update yum install ansible 验证ansible是否成功安装 ansible --version an ...

  3. tcpdump 与 抓包分析

    在Windows下一般使用WireShark 抓包软件,tcpdump 是 Linux 系统的抓包软件.它可以抓取 TCP/IP 协议族的数据包,支持针对网络层.协议.主机.端口的过滤,并提供 and ...

  4. java集合类笔试选择题整理含答案

    1.ArrayList list=new ArrayList(20);中的list扩充几次()A. 0B. 1C. 2D. 3答案:A分析:已经指定了长度, 所以不扩容 2.List.Set.Map哪 ...

  5. OpenLayers学习笔记(十二)— 飞机速度矢量线预测(二)

    根据计算公式实现预测线 作者:狐狸家的鱼 GitHub:八至 之前有一篇博客简单写了一个模拟demo,根据物体当前的速度和方向预测多少时间后所在的位置,具体计算是参考<(译)计算距离.方位以及更 ...

  6. 算法 按照ASII码从小到大输出字符(数量最多)

    题目描述 如果统计的个数相同,则按照ASCII码由小到大排序输出 .如果有其他字符,则对这些字符不用进行统计. 实现以下接口:输入一个字符串,对字符中的各个英文字符,数字,空格进行统计(可反复调用)按 ...

  7. 【纪中集训】2019.08.01【NOIP提高组】模拟 A 组TJ

    T1 Description 给定一个\(N*N(N≤8)\)的矩阵,每一格有一个0~5的颜色.每次可将左上角的格子所在连通块变为一种颜色,求最少操作数. Solution IDA*=启发式迭代加深 ...

  8. Ceph BlueStore与FileStore:利用Micron NVMe SSD进行性能比较

    https://www.micron.com/about/blog/2018/may/ceph-bluestore-vs-filestoreblock-performance-comparison-w ...

  9. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  10. zabbix监控winserver网卡流量

    当前基于windows2008系统安装配置zabbix客户端,服务端为linux系统 1.设置防火墙规则 开启防火墙入站(tcp和udp)10050端口 2.在zabbix官网上下载windows包 ...