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

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

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

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

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

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

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

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

  1. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  2. Android中图片处理相关问题

    在Android的开发中,我们经常回去处理一些图片相关的问题,比如当加载图片到内存中产生的OOM(OutOfMemory)异常.图片加载到内存中占多大内存的问题.jpg png两种常见的图片的原理及区 ...

  3. Android(java)学习笔记139:在TextView组件中利用Html插入文字或图片

    首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

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

    自我总结,有什么不足之处请告知,感激不尽!下一次总结pdf模板映射生成报表(应对多变的pdf报表需求,数据提供和报表生成解耦). 目的:在给定的pdf模板上生成报表,就需要知道最基本的操作:文字添加, ...

  5. 分别使用docx4j,jacob将文字与图片插入word中书签位置

    项目中需要将一段文字,与人员的签名(图片)插入到上传的word中,上网查询了一下,有许多种方式可以向word中插入文字,发现docx4j与jacob都为比较常见的解决方案,于是就先使用的docx4j进 ...

  6. golang-imagick图片去除边框(黑边,白边,),添加中文字

    图片去除边框(黑边,白边) package main import ( "fmt" "github.com/gographics/imagick/imagick" ...

  7. Android(java)学习笔记81:在TextView组件中利用Html插入文字或图片

    1. TextView中利用Html插入文字或者图片: 首先我们看看代码: (1)activity_main.xml: <LinearLayout xmlns:android="htt ...

  8. poi读取docx中的文字和图片(自己应用)

    poi读取docx中的文字和图片(自己应用) package com.fry.poiDemo.dao; import java.io.File; import java.io.FileInputStr ...

  9. Word文字中嵌套的图片向上突出,与文字的高度不一致

    文字中嵌套的图片向上突出,与文字的高度不一致. 调整方法: 选中图片,找到Font字体设置,选中位置下拉框,选择适当项. Select the inline graphic by clicking o ...

随机推荐

  1. dubbo入门学习(六)-----dubbo原理

    RPC原理 一次完整的RPC调用流程(同步调用,异步另说)如下: 1)服务消费方(client)调用以本地调用方式调用服务: 2)client stub接收到调用后负责将方法.参数等组装成能够进行网络 ...

  2. stash解决git合并冲突问题

    参考博客: https://www.cnblogs.com/juandx/p/5362723.html

  3. golang 程序 在linux 出现 段错误

    刚做的 golang 程序 发布到linux 竟然出现 段错误 原因是 内核版本过低,请升级内核

  4. CentOS如何升级openssl到最新版本

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:CentOS如何升级openssl到最新版本: 环境信息 CentOS Linux release 7.6.1810 (Core): Op ...

  5. 用javascript的classList代替jquery的class操作

    javascript的className操作方法比较难受,他获取的是一个连续的字符串 必须要用split拆分开,好多人因此想去用jquery的addClass,removeClass,hasClass ...

  6. 因子分析spss怎么做 spss因子分析教程及结果解释

    因子分析spss怎么做 spss因子分析教程及结果解释 因子分析spss可以简化数据结构,将具有错综复杂关系的变量综合为数据较少的因子,在信息损失最小的情况下对变量进行分类,不过有些朋友多spss因子 ...

  7. Eclipse安装Spket插件

    Eclipse安装Spket插件 1.在线安装,地址:Spket - http://www.agpad.com/update 2.下载插件包安装, 地址:http://www.spket.com/

  8. java验证码识别

    首先参考了csdn大佬的文章,但是写的不全ImgUtils类没有给出代码,无法进行了 写不完整就是制造垃圾 不过这个大佬又说这个大佬的文章值得参考于是又查看这篇文章 有案例https://blog.c ...

  9. Exception in thread "AWT-EventQueue-0" javax.persistence.PersistenceException: No Persistence provider for EntityManager named null

    swing Exception in thread "AWT-EventQueue-0" javax.persistence.PersistenceException: No Pe ...

  10. IO流6 --- FileReader中使用read(char[] cbuf)读入数据 --- 技术搬运工(尚硅谷)

    FileReader 字符输入流 @Test public void test2(){ File file = new File("hello.txt"); FileReader ...