行高和字号

行高

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. leetCode 33.Search in Rotated Sorted Array(排序旋转数组的查找) 解题思路和方法

    Search in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unknown to you before ...

  2. Runtime 运行时之一:消息转发

    解释一 上一篇文章咱们提到了Runtime的消息传递机制,主要围绕三个C语言API来展开进行的.这篇文章我将从另外三个方法来描述Runtime中另一个特性:消息转发机制. 一.消息转发机制 当向某个对 ...

  3. c++11——std::function和bind绑定器

    c++11中增加了std::function和std::bind,可更加方便的使用标准库,同时也可方便的进行延时求值. 可调用对象 c++中的可调用对象存在以下几类: (1)函数指针 (2)具有ope ...

  4. MQTT的学习研究(十三) IBM MQTTV3 简单发布订阅实例

    使用IBM MQTTv3实现相关的发布订阅功能 MQTTv3的发布消息的实现: package com.etrip.mqttv3; import com.ibm.micro.client.mqttv3 ...

  5. MyBatis——日志

    Logging Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging ...

  6. Android PackageManager:queryIntentActivities

    Intent intent = new Intent(Intent.ACTION_MAIN, null); intent.setPackage(getPackageName()); intent.ad ...

  7. Hibernate(1)——数据访问层的架构模式<转>

    数据库的概念.逻辑.数据模型概念 应用程序的分层体系结构发展 MVC设计模式与四层结构的对应关系 持久层的设计目标 数据映射器架构模式 JDBC的缺点 Hibernate简介 迅速使用Hibernat ...

  8. IIS7的HTTP到HTTPS的重定向

    方法一设置IIS 从HTTP到HTTPS的IIS7中的所有流量重定向,将确保用户始终安全地访问该网站.有许多不同的方法来设置一个IIS7从HTTP重定向到HTTPS和一些比别人更好.理想的HTTP到H ...

  9. Linux操作系统上ADSL拨号上网的方法详解

    1.安装 yum install rp-pppoe.x86_64 2.配置PPPOE客户端软件 安装完软件包后,必须配置pppoe的配置文件/etc/ppp/pppoe.conf,从而让ADSL拨号时 ...

  10. 交换机工作原理、MAC地址表、路由器工作原理详解

    一:MAC地址表详解 说到MAC地址表,就不得不说一下交换机的工作原理了,因为交换机是根据MAC地址表转发数据帧的.在交换机中有一张记录着局域网主机MAC地址与交换机接口的对应关系的表,交换机就是根据 ...