单行中文字和图片的相关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 ...
随机推荐
- 一些常见的synthesis attribute
Noprune A Verilog HDL synthesis attribute that prevents the Quartus II software from removing a regi ...
- python基础---内置函数 和 匿名函数 知识点自查填空题
1.file ---默认是输出到(),如果设置为(),输出到() 2.sep---打印(),默认为() 3.end---每一次打印的结尾,默认为() 4.flush---立即把内容输出到(),不做() ...
- 深入浅出 Java Concurrency (20): 并发容器 part 5 ConcurrentLinkedQueue[转]
ConcurrentLinkedQueue是Queue的一个线程安全实现.先来看一段文档说明. 一个基于链接节点的无界线程安全队列.此队列按照 FIFO(先进先出)原则对元素进行排序.队列的头部 是队 ...
- etcd 研究研究
先记录参考信息:etcd 场景https://blog.csdn.net/bbwangj/article/details/82584988 etcd 集群部署https://www.jianshu.c ...
- Python之通配符--提取文件中的内容并输出
前言:我的学习进度其实没有那么快的,因为现在是网络工程师实习,只有晚上一点时间和周末有空,所以周一到周天的学习进度很慢,今天之所以突然跳到通配符是因为工作需要,大体讲一下我的工作需求:网络工程师就是写 ...
- SVN添加自动忽略文件.settings .project .classpath target等
eclipse svn提交忽略文件及文件夹,ignore设置无效.. 一.方法: 1. 将文件夹或文件从Eclipse中删除.记得要在Eclipse中删除,而不是Windows文件管理界面删除. 2. ...
- Leetcode221. Maximal Square最大正方形
在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 方法一 ...
- Leetcode563.Binary Tree Tilt二叉树的坡度
给定一个二叉树,计算整个树的坡度. 一个树的节点的坡度定义即为,该节点左子树的结点之和和右子树结点之和的差的绝对值.空结点的的坡度是0. 整个树的坡度就是其所有节点的坡度之和. 示例: 输入: 1 / ...
- 万能的pdftk
pdftk (the pdf toolkit) 是一个功能强大的命令行的 PDF 文件编辑软件,可以合并/分割 PDF 文档.对 PDF 文件加密解密.给 PDF 文档加水印.从 PDF 文档中解出附 ...
- 洛谷P3298 泉
时空限制 1000ms / 128MB 题目描述 作为光荣的济南泉历史研究小组中的一员,铭铭收集了历史上x个不同年份时不同泉区的水流指数,这个指数是一个小于. 2^30的非负整数.第i个年份时六个泉区 ...