vertical-align:middle实现图片与文字垂直居中对齐
css代码:
header .logo{
display:inline-block;
margin-left: 10px;
width: 15%;
line-height: 9.1rem;
background: #eee;
}
header .logo a span{
font-size: 2.1rem;
vertical-align:middle;
}
header .logo img{
width: 70px;
height: 70px;
vertical-align:middle;
}
html代码:
<div class="logo">
<a href="#"><img src="data:images/logo.png" alt="#"><span>新世界</span></a>
</div>
效果:

vertical-align:middle实现图片与文字垂直居中对齐的更多相关文章
- 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!
块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...
- 用CSS如何实现单行图片与文字垂直居中
图片样式为 以下为引用的内容:.style img{vertical-align:middle;.....} 如果STYLE中有其它如INPUT或其它内联元素可写成 以下为引用的内容:.style i ...
- TextView展示富文本时emoj或图片和文字不对齐的解决方案
在项目中,回复框.聊天界面的显示往往会有emoj或者图片,但是一个比较头疼的问题是,会出现emoj表情或者图片和文字的位置不对齐,总是有偏移,这样很影响用户体验的.下面会总结一下如何解决这个问题. 本 ...
- iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】
以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...
- p标签中的span标签文字垂直居中对齐
<p>轻舞飞扬<span>第一次亲密接触</span></p> p标签的font-size:30px; span标签的font-size:24px; 让 ...
- HTML5[8]: 图文混排,图片与文字居中对齐
<img src="image.png"><span>999</span> img { /* ... */ vertical-align: t ...
- div css 图片和文字上下居中对齐
想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...
- iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片
Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...
- css 单行/多行文字垂直居中问题
例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...
随机推荐
- webpack 运行提示“The ‘mode‘ option has not been set”的原因和解决方法
最近在研究webpack,当我执行npm run build / npm start / npm run server等命令时,都是提示下面的警告信息 WARNING in configuration ...
- SafetyNet Attestation API
https://developer.android.google.cn/training/safetynet/attestation#verify-compat-check SafetyNet At ...
- iOS - UILabel添加图片之富文本的简单应用
//创建富文本 NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:@" ...
- 自主移动机器人同时定位与地图创建(SLAM)方法概述
1.引言: 机器人的研究越来越多的得到关注和投入,随着计算机技术和人工智能的发展,智能自主移动机器人成为机器人领域的一个重要研究方向和研究热点.移动机器人的定位和地图创建是自主移动机器人领域的热点研究 ...
- H - Being a Good Boy in Spring Festival
一年在外 父母时刻牵挂 春节回家 你能做几天好孩子吗 寒假里尝试做做下面的事情吧 陪妈妈逛一次菜场 悄悄给爸爸买个小礼物 主动地 强烈地 要求洗一次碗 某一天早起 给爸妈用心地做回早餐 如果愿意 你还 ...
- python3.6利用pyinstaller模块打包程序为.exe可执行程序
步骤: 1.安装pyinstaller模块:(必须在联网情况下进行) 操作原理: python3.6已经自带了pip,所以只需要在cmd中执行 pip install pyinstaller 就可以安 ...
- 查看线程的进程id
import os from threading import Thread def f1(n): print(n) print('%d号线程的id是%s'%(n,os.getpid())) if _ ...
- MYSQL数据库在Windows系统中重置root密码
1.以系统管理员身份打开cmd 2.查看MySQL是否启动: net start 3.如果启动就停止:net stop MySQL55 注:MySQL55是在我的电脑上的mysql数据库服务名 4.再 ...
- 2018中国大学生程序设计竞赛 - 网络选拔赛 Dream hdu6440 Dream 给出一个(流氓)构造法
http://acm.hdu.edu.cn/showproblem.php?pid=6440 题意:让你重新定义任意一对数的乘法和加法结果(输出乘法口诀表和加法口诀表),使得m^p+n^p==(m+n ...
- iOS知识点持续更新。。。
1.自动布局拉伸和压缩优先级 Autolayout中每个约束都有一个优先级,优先级的范围是1~1000.创建一个约束,默认的优先级最高是1000. Content Hugging Priority:该 ...