CSS一个属性,让图片后的文字垂直居中,效果看得见
困扰我多年的疑难,终于解决了。哈哈哈,太爽了
背景
页面经常遇到,图片后面的文字显示在图片的中间部位,也就是说文字图片垂直居中。
<div class="banner">
<img alt="北京运通恒达科技有限公司" src="img/ytforever-logo.png" width="120" height="100">
质量数据采集与分析系统登录
</div>
问题
多少年了,遇到这种设计,我就头大,各种尝试,均告失败。什么设置高度垂直啊、图片定位啊,各种折腾
以往
最简单粗暴的,就是ps直接把图片文字排版好,直接显示一张图片,多霸气。隐隐的伤痛就是,文字不能程序控制,多伤!!!
现在好了
发现竟然有这种操作,直接给img设置
img{
vertical-align: middle;
}
就这么简单,上面的烦恼迎刃而解,哈哈哈,太舒爽了,整个世界都安静了。
简直完美,多漂亮啊。大道至简,寻道!
以上
谢谢大家!
沫沫金为您提供各种开发方案,祝您登上人生巅峰。
CSS一个属性,让图片后的文字垂直居中,效果看得见的更多相关文章
- JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <l ...
- select中文字垂直居中解决办法
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对sel ...
- border-width和border其它属性配合实现的小三角形标签效果
如图,附上css代码 { width: 0; border-width: 30px 0px 72px 164px; border-style:solid; border-color:red; bord ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 使用css属性line-height实现文字垂直居中的问题
使用css属性line-height实现文字垂直居中的问题 1.使用css属性line-height实现文字垂直居中 方法比较简单,但是只能实现单行文字的垂直居中. 单行垂直居中效果如下: 要是p ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
- UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列
button可以设置 titleEdgeInsets属性和 imageEdgeInsets属性来调整其image和label相对位置,具体参考http://stackoverflow.com/ques ...
随机推荐
- linux下软、硬链接的创建和删除
linux下软.硬链接的创建和删除 在Linux系统中,内核为每一个新创建的文件分配一个Inode(索引结点),每个文件都有一个惟一的inode号.文件属性保存在索引结点里,在访问文件时,索引结点被复 ...
- 彻底解决springMVC中文乱码
一.页面编码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> & ...
- visual studio 不能进入调试状态
解决Windows操作系统在处理回环地址 1. 第一种解决方案是禁用环回检查. 步骤如下 a) 依次单击“开始”和“运行”,键入 regedit,然后单击“确定” b) 在注册表编辑器中,找到并单击下 ...
- BG.VM--CentOS
1. CentOS 更改IP 局域网配置: 在虚拟机的[网络]连接方式中选择:仅主机(Host-Only)网络. 路径:vim /etc/sysconfig/network-scripts/ifcfg ...
- 新手之首次部署阿里云centos7+mysql+asp.net mvc core应用之需要注意的地方
先来几个字,坑坑坑. 自己业余爱好者,签名一直捣鼓net+mssql,前阵买了阿里云esc,自己尝试做个博客,大体架子都打好了,本地安装了mysql,测试了也没问题. 部署到阿里云centos7,结果 ...
- 写给创业者:如何打造让用户离不开的App
百度权重查询 词库网 网站监控 服务器监控 SEO监控 Swift编程语言教程 还记得那个学会编程,开发了一个拼车应用程序——Trees For Cars,并因此发了一笔小财的流浪汉吗?今天的新闻称, ...
- [android] 手机卫士来电显示号码归属地
继续N天前的项目 开启服务监听手机来电,查询数据库,显示归属地 详细内容可以参考这篇博文:http://www.cnblogs.com/taoshihan/p/5331232.html Address ...
- Java基础教程(13)--包
为了使类型更易于查找,避免命名冲突和访问控制,我们应该使用包来对自己定义的类型进行管理.这里说的类型可以是类.接口.枚举和注解(枚举和注解的内容会在后续教程中介绍).使用包来管理我们的代码,有以下 ...
- SpringBoot(八) Caching (更新中...)
缓存配置 在springboot的主类添加注解@EnableCaching启用缓存支持 参考文档 33. Caching spring framework >>> 8. Cache ...
- C++读取配置文件
在牛人的指导下,和前一个版本有了较大改变. 逐行读取配置文件,然后逐行解析~ 读取一次之后,将键值对存入map,之后都从map中去取,减少读取文件次数 主要代码如下: /** * * read con ...