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

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

在写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. OPENCV 图像缩放

    工程下载地址 https://download.csdn.net/download/qq_16596909/11522434 opencv4 java netbeans开发,基于maven 可以按照倍 ...

  2. zepto.js按需载入模板对象

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/Joyhen/article/details/34412103 Zepto.js 是支持移动WebKi ...

  3. Leetcode151. Reverse Words in a String翻转字符串里的单词

    给定一个字符串,逐个翻转字符串中的每个单词. 示例: 输入: "the sky is blue", 输出: "blue is sky the". 说明: 无空格 ...

  4. 跟我一起做一个vue的小项目(七)

    先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...

  5. NoClassDefFoundError: Could not initialize class org.apache.cxf.jaxrs.provider.ProviderFactory org.springframework.aop.support.AopUtils.isCglibProxyClass

    报错: 2018-05-03 10:35:20 377 ERROR org.apache.juli.logging.DirectJDKLog.log:181 - Servlet.service() f ...

  6. 基于PHP的一种Cache回调与自动触发技术

    $s = microtime(true); for($i=0; $iaaa($array, $array, $array); $data = a::bbb($array, $array, $array ...

  7. light oj 1427(ac自动机)

    #include <bits/stdc++.h> using namespace std; *; ; map<string,int>Map; struct Trie { int ...

  8. _mysql_exceptions.IntegrityError: (1062, "Duplicate entry, Python操作MySQL数据库,插入重复数据

    [python] view plain copy sql = "INSERT  INTO test_c(id,name,sex)values(%s,%s,%s)" param =  ...

  9. 读书笔记--Head First 设计模式 目录

    1.设计模式入门 2.观察者模式 3.装饰者模式 4.工厂模式 5.单件模式 6.命令模式 7.适配器模式与外观模式 8.模板方法模式 9.迭代器与组合模式 10.状态模式 11.代理模式 12.复合 ...

  10. NSIS之MUI

    NSIS 2.0 版本支持定制的用户界面.所谓的 Modern UI(下称 MUI) 就是一种模仿最新的 Windows 界面风格的界面系统.MUI 改变了 NSIS 脚本的编写习惯,它使用 NSIS ...