一、总结:

line-height不仅可以用在段落文本中控制行与行之间的间距,还可以用来控制文本在li这种块级元素中的位置。

文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式:

关于line-height的详细讲解可以参考沁园春的博客:深入了解css的行高Line Height属性

用的最多的是采用纯数字,设置纯数字,我下面的行高的大小=2.5*16px=40px(字体大小,因为我没有设置字体的大小,所以默认为浏览器字体的大小为   16px)

行间距=行高-字体大小=40px-16px=24px;

文字上下的各半行间距为12px;

所以文字可以在高度为40px的容器中居中显示(垂直居中,水平居中用text-align属性)

css代码:

(每天的学习总结)

line-height让文本在块级元素中居中显示总结的更多相关文章

  1. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  2. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  3. html页面中块级元素的居中

    第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...

  4. span(行级元素)在不定高的div(块级元素)中垂直居中的方法

    设置父级元素: align-items: center; display: flex;

  5. css布局:块级元素的居中

    一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width: ...

  6. html中行级元素的居中显示。

    垂直居中.以label标签为例. <style> #label1{ vertical-align:middle; line-height:40px;<*父元素的height*> ...

  7. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  8. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  9. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

随机推荐

  1. xp 共享 guest

    一.首先启用guest来宾帐户 二.控制面板→管理工具→本地安全策略→本地策略→用户权利指派里,“从网络访问此计算机”中加入guest帐户,而“拒绝从网络访问这台计算机”中删除guest帐户: 三.我 ...

  2. JDBC存取二进制文件示例

    PutFile.java import java.io.File; import java.io.FileInputStream; import java.sql.*; public class Pu ...

  3. LK 光流法简介

    前言 若假定一个局部区域的像素运动是一致的,则可以用这个新的约束条件替代前文中提到的全局速度平滑约束条件.这种光流算法就叫做 LK 光流法. LK 光流法的推导 首先,需要推导出光流约束方程. 这一步 ...

  4. UVa 10795 - A Different Task

    题目大意:给出n,表示说有n个大小不同的盘子,然后再给出每个盘子的初始位置和目标位置,要求计算出最少的步数使得每个盘子都移动到它的目标位置. 分析:  首先找最大不在目标柱子上的盘子K,因为如果最大的 ...

  5. twisted的defer模式和线程池

    前言: 最近帮朋友review其模块服务代码, 使用的是python的twisted网络框架. 鉴于之前并没有使用过, 于是决定好好研究一番. twisted的reactor模型很好的处理了网络IO事 ...

  6. dennis gabor 从傅里叶(Fourier)变换到伽柏(Gabor)变换再到小波(Wavelet)变换(转载)

    dennis gabor 题目:从傅里叶(Fourier)变换到伽柏(Gabor)变换再到小波(Wavelet)变换 本文是边学习边总结和摘抄各参考文献内容而成的,是一篇综述性入门文档,重点在于梳理傅 ...

  7. Jquery_笔记

    1.请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件.

  8. php parse_url 函数教程

    [导读] php parse_url 函数教程parse_url ( PHP 4中, PHP 5中) parse_url -解析URL并返回其组成部分 描述 混合parse_url (字符串$网址[摘 ...

  9. sessionStorage和localStorage中 存储

    转:http://my.oschina.net/crazymus/blog/371757 sessionStorage只在页面打开是起作用, localStorage关闭页面后仍然起作用. 有时候,我 ...

  10. c++特性:指向类成员的指针和非类型类模板参数和函数指针返回值 参数推导机制和关联型别

    一.c++允许定义指向类成员的指针,包括类函数成员指针和类数据成员指针 格式如下: class A { public: void func(){printf("This is a funct ...