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 ...
随机推荐
- Smali 语法文档
可以选择保存成pdf格式,查询起来挺方便的 if v0==0 go cond_0 if-eqz v0, :cond_0 if v0!=0 go cond_0 if-nez v0, :cond_0 ...
- 【转】CSS3的calc()使用——精缩版
问题:在制作页面的时候,总会碰到有的元素是100%的宽度.如果元素宽度是100%时,只要在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模 ...
- springboot jpa 多条件查询(多表)
前几天写的,贴上来. 实体类. package com.syl.demo.daomain; import lombok.Data; import javax.persistence.*; /** * ...
- 【eclipse修改默认注释】
一.背景简介 丰富的注释和良好的代码规范,对于代码的阅读性和可维护性起着至关重要的作用.几乎每个公司对这的要求还是比较严格的,往往会形成自己的一套编码规范.但是再实施过程中,如果全靠手动完成,不仅效率 ...
- C盘空间被占满的原因
如何禁止IIS在C:\Windows\System32\LogFiles\HTTPERR中生成日志文件C:\Program Files\Microsoft SQL Server\MSSQL10_50. ...
- RegExp正则表达式——更深层次解析
转自:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp RegExp 构造 ...
- MyEclipse设置当前行背景颜色、选中单词前景色、背景色
General->Editors->Text Editors -> Current Line Hightlight 可以设置当前行的背景颜色 效果如下:
- ASP.NET 预编译笔记
本来下写篇总结,但感觉自己语言不知道怎么组织.就算了. aspnet_compiler的问题: 一开始 aspnet_compiler -v \ -p F: E: -fixednames e ...
- Java中获取32位UUID
public class createUUID { public static void main(String[] args) { String uuid = UUID.randomUUID().t ...
- Spring boot 入门二:Spring Boot配置文件详解
一.自定义属性 当我们创建一个springboot项目的时候,系统默认会为我们在src/main/java/resources目录下创建一个application.properties.同时也支持ym ...