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

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

在写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. virtualbox 启动虚拟机提示Cannot load R0 module

    Cannot load R0 module C:\Program Files\Oracle\VirtualBox/VBoxDDR0.r0: SUPR3LoadModule: supLoadModule ...

  2. Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)

    对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过 Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...

  3. C++与Matlab混合编程之:矩阵数据结构

    项目需要将matlab代码写成C++,准备用opencv.opencv中矩阵的存储与matlab有所不同,应注意以下问题: 1.matlab中矩阵是按照列优先存储的.对于n0*n1*...*nn维的矩 ...

  4. 此处有加速 apt-get github docker pull

    ubuntu get-apt 加速 创建 aptupdate.sh 脚本,内容为: #!/bin/bash mv /etc/apt/sources.list /etc/apt/sources.list ...

  5. RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?

    RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...

  6. Neo4j Desktop 管理工具的安装和应用

    安装和启动Neo4j桌面 如果您还没有,请下载 Neo4j.使用提供的说明(下载时显示),按照步骤1安装并启动Neo4j Desktop应用程序.下载页面上的步骤2说明向您展示了如何设置您的第一个项目 ...

  7. vscode, eslint, prettier, vetur冲突及解决

    这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.一 从0开始1. 禁止工作区插件, 如下图:  2. 清空用户设置(Code–>首选项–>设置–>[右上角 ...

  8. 2018-8-10-WPF-使用不安全代码快速从数组转-WriteableBitmap

    title author date CreateTime categories WPF 使用不安全代码快速从数组转 WriteableBitmap lindexi 2018-08-10 19:16:5 ...

  9. vue开发中控制台报错问题

    1.sockjs.js?9be2:1606 GET http://localhost:8566/sockjs-node/info?t=1569478261510 net::ERR_CONNECTION ...

  10. [转]文件file属性详解

    不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...