单行中文字和图片的相关height和line-height特性
这几天在做仿京东的产品页,发现在制作过程中的一些问题,需要好好研究下。

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

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

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

发现文本是居中的,但是a标签元素却只有14px的高度,因而导致背景图片和文字没有对齐,这一点需要重视。
后来的做法,就是设置b标签设置竖线:

在这里,标签b会受到line-height的影响,从而垂直居中显示。
单行中文字和图片的相关height和line-height特性的更多相关文章
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
- Android中图片处理相关问题
在Android的开发中,我们经常回去处理一些图片相关的问题,比如当加载图片到内存中产生的OOM(OutOfMemory)异常.图片加载到内存中占多大内存的问题.jpg png两种常见的图片的原理及区 ...
- Android(java)学习笔记139:在TextView组件中利用Html插入文字或图片
首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...
- Java在已存在的pdf文件中生成文字和图片--基础
自我总结,有什么不足之处请告知,感激不尽!下一次总结pdf模板映射生成报表(应对多变的pdf报表需求,数据提供和报表生成解耦). 目的:在给定的pdf模板上生成报表,就需要知道最基本的操作:文字添加, ...
- 分别使用docx4j,jacob将文字与图片插入word中书签位置
项目中需要将一段文字,与人员的签名(图片)插入到上传的word中,上网查询了一下,有许多种方式可以向word中插入文字,发现docx4j与jacob都为比较常见的解决方案,于是就先使用的docx4j进 ...
- golang-imagick图片去除边框(黑边,白边,),添加中文字
图片去除边框(黑边,白边) package main import ( "fmt" "github.com/gographics/imagick/imagick" ...
- Android(java)学习笔记81:在TextView组件中利用Html插入文字或图片
1. TextView中利用Html插入文字或者图片: 首先我们看看代码: (1)activity_main.xml: <LinearLayout xmlns:android="htt ...
- poi读取docx中的文字和图片(自己应用)
poi读取docx中的文字和图片(自己应用) package com.fry.poiDemo.dao; import java.io.File; import java.io.FileInputStr ...
- Word文字中嵌套的图片向上突出,与文字的高度不一致
文字中嵌套的图片向上突出,与文字的高度不一致. 调整方法: 选中图片,找到Font字体设置,选中位置下拉框,选择适当项. Select the inline graphic by clicking o ...
随机推荐
- 全栈之路-微信小程序-SKU开发(分析)
SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...
- linux服务器项目搭建常用命令
linux下载链接文件 wget -c 后面是该网络地址和文件的位置. 例如:wget -c http://apache.opncas.or/MySQL/MySQL-7/v7.0.67/bin/MyS ...
- js 给链接 url或href或js、css、图片等解决浏览器缓存
一. 添加时间戳 情况一.链接是常量 var rand = new Date().getTime(); var aLen=document.getElementsByTagName("a&q ...
- JS中的一些函数式编程术语
组合 Composition 组合某种类型(含函数)的两个元素,进而生成一个该类型的新元素: JavaScript 1 2 3 4 5 6 7 let compose = (f ...
- 关于Cocos2d-x多线程异步载入资源的问题
我们通常使用CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("xxx.plist" ...
- [Day5] Nginx 变量
一. Nginx中的变量原理 提供变量的模块和使用变量的模块 nginx启动,提供变量的模块会在一个回调函数中定义新的变量名和解析出变量的方法. 请求来了以后,使用变量的模块会根据变量名,去调用解析变 ...
- Mysql指定部分数据同步
一.需求背景 朋友的公司需要每天定时从源端定时同步一部分数据到目标端,库中存在company_id列的表,只将指定的company_id列导入到目标端数据库:存在company_id列的表,将表中所有 ...
- ThinkPHP中实现微信支付(jsapi支付)流程
https://blog.csdn.net/sinat_35861727/article/details/72783988 之前写过一篇文章讲了 PHP实现微信支付(jsapi支付)流程 ,详见文章: ...
- nginx的四个基本功能
Nginx能做什么 1.反向代理2.负载均衡3.HTTP服务器(包含动静分离)4.正向代理 以上就是做网站小编了解到的Nginx在不依赖第三方模块能处理的事情,下面详细说明每种功能怎么做 1.反向代理 ...
- WAP网站的推广方式(自整合篇)
WAP网站推广随着无线互联时代的到来,已经日益受到大家的重视.虽然WAP网站的目前盈利模式还不是很清晰,但WAP网站推广的竞争强度将肯定会越来越激烈,下面和大家一起探讨下WAP网站的推广方法. 方法/ ...