一、总结：

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. i++为什么没有自增探析——JVM中i++的实现(转)

    很多朋友在使用Java时候会发现一个很奇怪的现象. 那就是使用下列的短句时会发现i没有自增,这是很让人迷惑的,因为大家印象中,虽然i++优先级较低,但是总是会自增的,这里为什么i++没有自增? i=i ...

  2. 五 Servlet 技术

    一 Servlet 基础 1. 定义相关: a) 是运行在 Web 服务器上得 Java 小程序 b) 只将处理结果返回给客户 c) 是实现接口 Servlet 的 java 类,能被服务器调用. d ...

  3. MyEclipse 10 和 2014 两个版本共存破解 - imsoft.cnblogs

      第一步:运行 (run.bat)文件, 输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildKey 第四 ...

  4. 安装完openfire之后打不开的解决方案

    今天在http://www.igniterealtime.org/downloads/index.jsp下载了一个最新openfire for mac版 在系统的偏好设置里面是这样的.那个open A ...

  5. H-ui小技巧

    图片上传时修改错误提示信息(图超过允许上传的图片的数量):在webuploader.js中修改

  6. Win10如何设置相关性

    为什么要设置相关性? 有一些老的游戏或者程序,没有针对多核cpu进行优化,运行的时候会出现卡顿,这个时候需要通过相关性的设置,让程序只使用一个cpu核心. 怎么设置相关性? win10以前的系统直接打 ...

  7. (转) Quick Guide to Build a Recommendation Engine in Python

    本文转自:http://www.analyticsvidhya.com/blog/2016/06/quick-guide-build-recommendation-engine-python/ Int ...

  8. 靠边伸缩菜单的做法（类似QQ，碰到就会伸出来）

    这段脚本主要实现一个group的伸缩功能,group里面的内容也就是菜单的内容可以自由添加. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  9. linq中AsEnumerable和AsQueryable的区别

    本文导读:用Linq来操作集合的时候会用到AsQueryable()和AsEnumerable(),何时该用AsQueryable()和何时该用AsEnumerable(),或许存在些疑惑.AsQue ...

  10. PHP使用Mysql事务

    <?php //数据库连接 $conn = mysql_connect('localhost', 'root', ''); mysql_select_db('test', $conn); mys ...