一、总结：

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. web app 变革之rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  2. igv

    integrative genomics viewer 下载: http://www.broadinstitute.org/igv/download 下载前要注册 导入参考基因组:http://www ...

  3. 徹底刪除atom

    rm -f ~/.atom rm -f /usr/local/bin/atom rm -f /usr/local/bin/apm rm -f /Applications/Atom.app rm -f ...

  4. 2015GitWebRTC编译实录6

    2015.07.20 libbitrate_controller 编译通过依赖system_wrappers lib,编写测试代码时需要注意.[425/1600 ] CXX obj /webrtc/m ...

  5. HDU 1312 Red and Black --- 入门搜索 DFS解法

    HDU 1312 题目大意: 一个地图里面有三种元素,分别为"@",".","#",其中@为人的起始位置,"#"可以想象 ...

  6. POJ 1043 What's In A Name?（唯一的最大匹配方法）

                                                            What's In A Name? Time Limit: 1000MS   Memor ...

  7. poj1611 带权并查集

    题意:病毒蔓延,现在有 n 个人,其中 0 号被认为可能感染,然后给出多个社交圈,如果某个社交圈里有人被认为可能被感染,那么所有这个社交圈里的人都被认为可能被感染,现在问有多少人可能被感染. 带权并查 ...

  8. jQuery之Deferred对象的使用

    详见:http://www.imooc.com/code/8907 JavaScript的执行流程是分为"同步"与"异步" 传统的异步操作会在操作完成之后,使用 ...

  9. MySQL中日期与字符串相互转换，并进行日期比较查询

    技术交流群:233513714 1.日期无需转换查询(日期在数据库中的类型为字符串) select * from day where dateTime > '2016-03-15' 2.使用da ...

  10. 关于MSP430中断机制

    中断很大程度上体现了一款单片机的性能,从这一点将MSP430在中断方面做得很不错,主要是提供了非常丰富的中断源,基本的有IO中断,定时器中断和一些接口中断(SPI,UART,I2C)等等.     现 ...