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 ...
随机推荐
- SQLServer2008 导出数据库表结构和数据
很多朋友问到sql server数据库”生成脚本”,只导出了数据库的sql脚本,而表里的数据依然没有导出来.很简单,看教程: 注:我这里用的SQLServer2008,其它版本应该差不多. 一.选中要 ...
- MySQL 之 单表查询
一.简单查询 -- 创建表 DROP TABLE IF EXISTS `person`; CREATE TABLE `person` ( `id` int(11) NOT NULL AUTO_INCR ...
- day_11 py 名片管理系统
'' 2018-4-23 11:42:29 名片管理系统 字典与列表的结合 ''' #1.打印功能提示 print("="*50) print(" 1.添加一个新的名片& ...
- day_5.11 py main
''' 2018-5-11 18:52:19 模块其实就是Java中的包 模块 就是 xxx.py main.py默认是最主要的模块 ''' class ClasssName(object): pas ...
- 自己的memcache类
Mem类代码: class Mem { //类型是memcache或memcached private $type = 'Memcached'; //会话 privat ...
- vue 实现聊天框滚动到底
在需要出现滚动条的 DOM上添加 v-scroll 属性: <div class="chat-box" v-scroll="{auto: true}"&g ...
- [Asp.net]绝对路径和相对路径
目录 绝对路径 相对路径 总结 绝对路径 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径.比如:E:\新概念英语\新版新概念英语第二册课文PDF.pdf.以Web 站点根目录为参考基础的目录路径 ...
- Docker之OVS网络
OVS介绍 什么是OpenVSwich? OpenvSwich:开放虚拟交换标准,是一种基于开源Apache2.0许可证的多层软件交换机,专门管理多租赁云计算网络环境,支持KVM.Xen等虚拟化技术. ...
- myeclipse编译弹框:The builder launch configuration could not be found
myEclipse 每次编译时报 "The builder launch configuration could not be found" 的弹框:不影响项目编译启动,但是弹框挺 ...
- 省一行是一行:在if语句中使用C# 7.0的模式匹配
C# 7.0的模式匹配(Pattern Mathing)不仅可以节省代码,而且可以让代码更流畅(Fluent),今天又在实际开发中体会了一下. 不用模式匹配的代码,需要先获取返回值,然后用if进行判断 ...