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 ...
随机推荐
- mysql常用语句和函数
mysql语句如果长期不写,就会忘掉,所以要时常复习,温故而知新. 1.select length("中国人"),select char_length("中国人" ...
- L - Fire Game
Fat brother and Maze are playing a kind of special (hentai) game on an N*M board (N rows, M columns) ...
- MySQL使用root用户授权出现错误ERROR 1045 (28000) at line 2: Access denied for user 'root'@'%' (using password: YES)解决办法
参考:https://blog.csdn.net/open_data/article/details/42873827 使用MySQL的root用户登录出现错误提示 ERROR 1045 (28000 ...
- GEM5安装
转自:http://blog.sina.com.cn/s/blog_548b0a230101cagk.html GEM5在ubuntu13.10下安装过程,首先下载gem5_stable最新安装包,解 ...
- 洛谷P1040 加分二叉树【记忆化搜索】
题目链接:https://www.luogu.org/problemnew/show/P1040 题意: 某一个二叉树的中序遍历是1~n,每个节点有一个分数(正整数). 二叉树的分数是左子树分数乘右子 ...
- Codeforces 1132D - Stressful Training - [二分+贪心+优先队列]
题目链接:https://codeforces.com/contest/1132/problem/D 题意: 有 $n$ 个学生,他们的电脑有初始电量 $a[1 \sim n]$,他们的电脑每分钟会耗 ...
- window.onresize监听事件
window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...
- C和C指针小记(九)-指针用法1
1. *p++ 最常用的一个指针的用法,就是在循环中用来迭代. *p++ 共有3步操作: 1.++操作符把p所指向的内存中的值复制一份 2.++操作符把p加1(实际是一个p所指内存单元的大小,这也是编 ...
- python-----双色球实现(实例1)
#输出用户指定组数的双色球信息,其中一组信息 6个红色号码获取范围(1-33),1个蓝色号码获取范围(1-16),要求一组信息中红球内号码不可重复 import randomdef get_ball( ...
- 解决vshost32.exe已停止工作
VS2015,搞二次开发遇到这个问题,这个真的很坑,都没法找到问题.然后百度到答案,将调试中的"启用Visual Studio 承载进程"的√去掉: 一开始感觉是内存的问题,后来又 ...