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

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

在写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. hdu2516

    hdu2516斐波那契博弈,也是一堆博弈的一种,第一个人第一次可以拿任意多,但是不能取完,第二个人拿至少一个,但不能超过上一个人拿的两倍 #include<iostream> #inclu ...

  2. 尝试一下LLJ大佬的理论AC大法

    1.BZOJ 3522 Poi2014 Hotel DFS 给定一棵树,求有多少无序三元组(x,y,z)满足x,y,z互不相等且Dis(x,y)=Dis(y,z)=Dis(x,z) 枚举中心点,分别d ...

  3. bootstrap字体图标在IE上不显示

    最简单的办法就是直接下载最新的bootstrap.css替换掉旧的. 但是由于我做的项目直接替换会出现样式冲突问题,因此只好慢慢找是什么属性导致图标不显示,最后找到了解决办法: 1.首先保字体文件的位 ...

  4. 微信小程序--导航跟随

    最近开发小程序的时候遇到这样一个需求:如图1 页面向下滚动到白色导航的位置时,白色导航固定到页面最上方:当页面向上滚动到白色导航时,白色导航恢复到原始位置:点击各个导航,平滑的跳到相应位置. 思路1: ...

  5. VS中添加配置X86平台

    最近IIS发布程序时,总是容易碰到下面的错误.这个错误网上绝大部分都是提出在VS把解决方案设置为在X86平台生成,然后再发布.但是查看应用程序后发现没有X86平台选项,下面是添加X86目标平台的方法.

  6. Golang Learn Log #0

    Print/Printf 区别 Print: 可以打印出字符串, 和变量 fmt.Println(var) //right fmt.Println("string") //righ ...

  7. WhaleCTF之web密码泄露

    WhaleCTF之密码泄露 前往题目 没有思路,习惯看一下源码,拉到最后,发现有惊喜 直接把index.php 换成password.txt,访问 这是要让我密码爆破吗?直接把密码保存成passwor ...

  8. 初学linux时遇到的那些哭笑不得的问题

    1.终端中无法输入密码? 在终端输入密码,是不会在输入密码的时候看见星号或者圆点符号的.它不会有任何输入密码的视觉指示,也不会有任何光标移动,什么也不显示. 其实是输进去了,只是没有明文显示出来而已. ...

  9. R语言中如何使用最小二乘法

    R语言中如何使用最小二乘法 这里只是介绍下R语言中如何使用最小二乘法解决一次函数的线性回归问题.         代码如下: > x<-c(6.19,2.51,7.29,7.01,5.7, ...

  10. 3D hover文字特效

    body { font-family: 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: upper ...