行高和字号

行高

CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的。

line-height: 40px;

文字,是在自己的行里面居中的。比如,现在文字字号14px,行高是24px。那么:

为了严格保证字在行里面居中,我们的工程师有一个约定: 行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被2整除。

单行文本垂直居中



需要注意的是,这个小技巧,行高=盒子高。 只适用于单行文本垂直居中!!不适用于多行。

如果想让多行文本垂直居中,需要设置盒子的padding:

下面是多行文字垂直居中的算法

字体设置

font属性能够将font-size、line-height、font-family合三为一:

font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。

font:12px/200% “宋体”  等价于
font:12px/24px “宋体”;

[css]单/多行居中&字体设置的更多相关文章

  1. css之多行居中

    需求: 单行到多行文字居中. <div> <p>应该为数组中的每个子代分配一个唯一的键.表格dataSource和中的值columns应遵循此规则.默认情况下</p> ...

  2. css单双行样式

    #random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...

  3. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

  4. C# 控制台程序(命令行程序)设置字体颜色,窗口宽高,光标行数

    控制台程序(命令行程序)设置窗口宽度高度,如下代码: Console.WriteLine(Console.WindowHeight); Console.WriteLine(Console.Buffer ...

  5. css 字间距离_css 字体字符间距设置

    介绍下css 字间距,使用css来控制字与字之间距离,也叫css字间距方法. 使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距. Css字间距.div ...

  6. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  7. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...

  8. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  9. android TextView字体设置最少占多少行. 及其 Java String 字符串操作 . .

    ①  字体设置: 修改代码 :  GridViewActivity.java priceTv为 TextView priceTv.setMaxLines(3); //当多与7个字fu的时候 , 其余字 ...

随机推荐

  1. mysql读写分离实战

    一个完整的MySQL读写分离环境包括以下几个部分: 应用程序client database proxy database集群 在本次实战中,应用程序client基于c3p0连接后端的database ...

  2. ios开发之--从相机或相册选取图片,并带删除操作的demo

    多选图片的一个效果,如下图:

  3. 2011年冬斯坦福大学公开课 iOS应用开发教程学习笔记(第三课)

    第二课名称是:Objective-C 回顾上节课的内容: 创建了单个MVC模式的项目 显示项目的各个文件,显示或隐藏导航,Assistant Editor, Console, Object Libra ...

  4. NodeJS-002-Expres启动

    1.打开app.js文件 2.在module.exports = app;之前输入: app.listen(8100,function(){ console.log("Server Star ...

  5. YARN 中的应用程序提交

    YARN 中的应用程序提交 本节讨论在应用程序提交到 YARN 集群时,ResourceManager.ApplicationMaster.NodeManagers 和容器如何相互交互.下图显示了一个 ...

  6. ZooKeeper(七)-- ZK原生API实现分布式锁

    一.使用场景 在分布式应用,往往存在多个进程提供同一服务.这些进程有可能在相同的机器上,也有可能分布在不同的机器上. 如果这些进程共享了一些资源,可能就需要分布式锁来锁定对这些资源的访问. 二.实现分 ...

  7. C++中的抽象基类示例

    抽象基类(abstract base class,ABC)例子:圆与椭圆.建立一个基类BaseEllipse,建立它的恋歌继承了Ellipse和Circle.ellipse.h #ifndef ELL ...

  8. Spring学习笔记--在SpEL中筛选集合

    要用到Spring的util(包括util:list等),xml文件中的beans中需要添加一些有关util的信息: <?xml version="1.0" encoding ...

  9. XML 和 JSON 的使用场景

    我们都知道 JSON 和 XML 设计的初衷里都包含一点是对人类友好, 所以两者在这方面属于竞争关系. 而在 UI 描述上, 我觉得 XML 是比 JSON 要优异很多. 我们先来看一组简单的数据排版 ...

  10. 详谈redis优化配置和redis.conf

    1. Redis.conf 配置参数: #是否作为守护进程运行 daemonize yes #如以后台进程运行,则需指定一个pid,默认为/var/run/redis.pid pidfile redi ...