单行中文字和图片的相关height和line-height特性

这几天在做仿京东的产品页,发现在制作过程中的一些问题,需要好好研究下。

需要实现的效果如上图所示:

在写CSS样式的时候,对于我的关于竖线的做法是:

设置高度为14,border样式,但导致了一个问题:

发现文本是居中的,但是a标签元素却只有14px的高度,因而导致背景图片和文字没有对齐,这一点需要重视。

后来的做法,就是设置b标签设置竖线:

在这里,标签b会受到line-height的影响,从而垂直居中显示

时间: 2024-10-03 22:38:42

单行中文字和图片的相关height和line-height特性的相关文章

Android中图片处理相关问题

在Android的开发中,我们经常回去处理一些图片相关的问题,比如当加载图片到内存中产生的OOM(OutOfMemory)异常.图片加载到内存中占多大内存的问题.jpg png两种常见的图片的原理及区别. 图片加载到内存所占内存大小的问题 在讲OOM异常前需要对图片的加载有所了解,所以在这里就先介绍图片加载的问题.  图片加载到内存中的大小,不是直接由图片的存储大小来决定的.比如一个10k大小的png格式的图片加载到内存可能就不止10k了.那应该怎么计算呢?      图片加载到内存中的大小=图

视频通讯中文字图片设置的解决方案

在前面发布的"AnyChat发布单向视频解决方案"中,一些应用场景需要在Web的视频上迭加文字.图片等内容来提高用户体验,AnyChat研发团队针对这种需求开放了新的API接口来实现,在AnyChatr4479版本中提供了相关的API接口. 新增API接口功能特点包括: 1.可以在视频上动态迭加文字信息,文字颜色.字体.大小.迭加位置可设置: 2.可以同时迭加不超过5条的文字信息到视频上: 3.可以动态更新文字信息迭加位置,实现文字信息的运动效果: 4.可以在视频上动态迭加图片信息,图

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

Java在已存在的pdf文件中生成文字和图片--基础

自我总结,有什么不足之处请告知,感激不尽!下一次总结pdf模板映射生成报表(应对多变的pdf报表需求,数据提供和报表生成解耦). 目的:在给定的pdf模板上生成报表,就需要知道最基本的操作:文字添加,图片添加. 原因:pdf生成中,最常见的操作就是生成文字,生成图片,所以本次和大家一块来学习一下文字和图片的生成. 准备工作: 1. 引入jar: 在pom.xml中引入itextpdf包语句,在链接随便选一个版本(我的是5.20):http://www.mvnrepository.com/arti

怎样识别图中文字,实现图片转文字的方法

如何识别图中文字呢?相信工作中有很多小伙伴都有遇到过图片转文字的问题,那么除了用电脑打字的方式进行解决,还有什么简单的方法可以实现这一操作呢?下面小编就来教大家一种使用OCR文字识别软件将图片转文字的方法. 操作步骤: 第一步.因为使用到的是PC端的工具,所以接下来的步骤都是在电脑中完成的,首先将OCR文字识别软件打开. 第二步.点击软件上方导航栏图片局部识别板块. 第三步.进入图片局部识别板块后,将所需转换的图片拖曳到界面中心添加图片的位置. 第四步.完成图片的添加后,可以通过下方一排小工具来

ASP.NET(C#)图片加文字、图片水印,神啊,看看吧

ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Imaging; private void AddTextToImg(string fileName,string text) { if(!File.Exists(MapPath(fileName))) { throw new FileNotFoundException("The file don't

[转]C#操作word模板插入文字、图片及表格详细步骤

c#操作word模板插入文字.图片及表格 1.建立word模板文件 person.dot用书签 标示相关字段的填充位置 2.建立web应用程序 加入Microsoft.Office.Interop.Word引用具体添加引用请参看http://www.microsoft.com/china/msdn/library/office/office/OfficePrIntopAssFAQ.mspx?mfr=true 3.相关示例代码 protected void CreateReport_Click(o

在InternetExplorer.Application中显示本地图片

忘记了,喜欢一个人的感觉 Demon's Blog  ?  程序设计  ?  在InternetExplorer.Application中显示本地图片 ? 对VBS效率的再思考--处理二进制数据 WordPress判断用户是否登录 ? 在InternetExplorer.Application中显示本地图片 标题: 在InternetExplorer.Application中显示本地图片作者: Demon链接: http://demon.tw/programming/internetexplor

iOS Quartz2D绘制线、矩形、弧、圆、文字、图片

利用Quartz2D中提供的图层上下文 Layer Graphics Context,进行简单绘制线.矩形.弧.圆.文字.图片 在storyBoard中得拖入控制器,添加多个UIView控件,并把各个UIView的class修改为自定义的类. 如: 绘制线: // // HJLineView.m // 画线三角矩形圆 // // Created by HJiang on 15/1/2. // Copyright (c) 2015年 HJiang. All rights reserved. //