【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!
块内或者行内图片与文字居中对齐最靠谱的方式!
做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码
首先是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对齐】块内或者行内图片与文字居中对齐最靠谱的方式!的更多相关文章
- css中块元素和行内元素区别
行内元素特点 1.和其他元素都在一行上: 2.元素的高度.宽度.行高及顶部和底部边距不可设置: 3.元素的宽度就是它包含的文字或图片的宽度,不可改变. 块元素特点 1.每个块级元素都从新的一行开始,并 ...
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- HTML5[8]: 图文混排,图片与文字居中对齐
<img src="image.png"><span>999</span> img { /* ... */ vertical-align: t ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题
图片.文字混排: 不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置. 此方法兼容IE7+ 和其它主流浏览器.IE7-没有测. inline-block ...
- css笔记12:块元素和行内元素
1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...
- HTML块元素,行内元素,类,头部元素
总结HTML块元素,行内元素,类,头部元素 块元素: 在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽.默认情况下,块级元素会独占一行,并且元素前后行留空. 示例:<h1&g ...
- CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...
- html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
随机推荐
- 2019牛客暑期多校训练营(第六场)C E H G
C Palindrome Mouse E Androgynos 参考https://blog.csdn.net/birdmanqin/article/details/98479219这位大佬的.构造题 ...
- 使用IDEA实现品优购项目搭建
转发自 https://www.jianshu.com/p/4710a87b65fa 使用idea实现品优购项目搭建 1.使用idea实现品优购项目搭建 本篇文章只针对品优购第一天使用 IDEA 搭建 ...
- Jquery中的offset()和position()深入剖析(元素定位)
先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...
- eclipse设置tomcat部署目录地址
参考: https://blog.csdn.net/lvyuan1234/article/details/53418818 右键,open 操作前提是所有项目移除,并且右键clean掉相关数据! 修改 ...
- apue 第6章 系统数据文件和信息
在给出用户登录名或数值用户ID后,这两个函数就能查看相关项. #include <sys/types.h> #include <pwd.h> struct passwd *ge ...
- axios拦截设置和错误处理
目前想出的处理接口请求进行全局错误提示 的最佳方案,axios整体配置如下 1.基于axiso.interceptors进行响应拦截: 主要负责全局提示错误 axios.interceptors.re ...
- zabbix 如何监控php-fpm?
zabbix监控php-fpm主要是通过nginx配置php-fpm的状态输出页面,在正则取值.要nginx能输出php-fpm的状态首先要先修改php-fpm的配置,没有开启nginx是没有法输出p ...
- mybatis中一对多查询collection关联不执行
今天遇到的原因是因为下面红底id没有,导致关联查询没有条件(id字段没传),所以一直没有执行. <?xml version="1.0" encoding="UTF- ...
- php-fpm.conf详细解析篇
一:php-fpm.conf详细解析篇: pm = static (静态模式)时只需修改 max_children数值 pm = dynamic (动态模式)时只需修改其它三个数值 pm.max_ch ...
- 项目集成swagger,并暴露指定端点给swagger
项目集成swagger 一:思考: 1.swagger解决了我们什么问题? 传统开发中,我们在开发完成一个接口后,为了测试我们的接口,我们通常会编写单元测试,以测试我们的接口的可用性,或者用postm ...