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 ...
随机推荐
- Redis JdkSerializationRedisSerializer,stringRedisSerializer,ProtoBuf 体积,性能简单比较.
/** * User: laizhenwei * Date: 2018-04-10 Time: 14:17 * Description: */ @RunWith(SpringRunner.class) ...
- python3之end关键字
end 关键字 关键字end可以用于将结果输出到同一行,或者在输出的末尾添加不同的字符,实例如下: #!/usr/bin/python3 # Fibonacci series: 斐波纳契数列 # 两个 ...
- E - Radar Installation
Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...
- js将图片转换为base64
直接上代码: var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = do ...
- 7:CSS Sprites的原理(图片整合技术)
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
- np.mgird np.ogrid
np.ogrid: address:https://docs.scipy.org/doc/numpy/reference/generated/numpy.ogrid.html returns an o ...
- [No0000153]详解C# 迭代器【转】
迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素而 ...
- hbase本地模式-安装及基本测试
解压缩hbase二进制安装文件到/opt目录下: #tar -zxvf hbase-0.98.6-cdh5.3.6.tar.gz -C /opt/cdh-5.3.6/ 编辑配置文件,这里仅配置数据目录 ...
- Copycat - command
client.submit(new PutCommand("foo", "Hello world!")); ServerContext connection.h ...
- Cmake入门资料
1.http://blog.sina.com.cn/s/blog_3f3422fd010009vn.html 2.http://www.cnblogs.com/coderfenghc/tag/cmak ...