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 ...
随机推荐
- 解决UEFI启动模式下无法使用U盘启动WIN7安装界面
问题场景 现在很多人都习惯使用U盘进行安装系统,主要是快捷方便.本文主要是讲解一下U盘在UEFI模式下无法启动Windows7安装界面的问题,可能很多人会说使用PE系统进行安装,但是因为我的主板只有独 ...
- celery 原理理解
这里有一篇写的不错的:http://www.jianshu.com/p/1840035cb510 自己的“格式化”后的内容备忘下: 我们总在说c10k的问题, 也做了不少优化, 然后优化总是不够的. ...
- 还不错的MUI技术文档
https://blog.csdn.net/xin724/article/details/81939176
- 书写 sql 中关于 update 多表联合更新的方法
SQL Update多表联合更新的方法(1) sqlite 多表更新方法//----------------------------------update t1 set col1=t2.col1fr ...
- Python学习笔记之--我又开始学习Python了(随时更新)
2019.02.09 更新 Python 学习计划已经开始几天了,跟着一本叫<Django for beginner>的书籍在学习用Django搭建自己的第一个网站,目前已经进行到第三章, ...
- SQL Server2012远程访问设置
http://jingyan.baidu.com/article/a681b0de3bdb7b3b19434667.html?qq-pf-to=pcqq.group 1.打开SQL server201 ...
- Django url配置 正则表达式详解 分组命名匹配 命名URL 别名 和URL反向解析 命名空间模式
Django基础二之URL路由系统 本节目录 一 URL配置 二 正则表达式详解 三 分组命名匹配 四 命名URL(别名)和URL反向解析 五 命名空间模式 一 URL配置 Django 1.11版本 ...
- FileZilla:425 Can't open data connection for transfer of解决办法
状况描述: 服务器端采用的Windows 2008系统,安装了FileZilla Server,客户端采用的FileZilla Client,客户端在连接服务器端的时候,可以正常通过验证,但是在列出目 ...
- [No0000131]WCF压缩传输方案整理
1.WCF进阶:将编码后的字节流压缩传输 2.通过WCF扩展实现消息压缩 3.WCF 消息压缩性能问题及解决方法
- 【绿书】 模拟,rep大坑
https://vjudge.net/contest/229603#problem/B 绿书题 大模拟,绿书上用了个比较麻烦的输入,其实只要getchar()!='0'就行 坑: rep(i,0,s. ...