一、总结:

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. editplus 常用快捷键汇总 大小写代码折叠

    文本类 新建普通文本:Ctrl+N新建浏览器窗口:Ctrl+Shift+B新建HTML页:Ctrl+Shift+N打开:Ctrl+O打开一个现有的文档文件结尾:Ctrl+End选区扩展到文档结尾处:C ...

  2. textarea元素在加上runat="server"后运行报错解决

    当出现这个报错的时候,在后台引用相应的命名空间,为 using System.Web.UI; using System.Web.UI.HtmlControls;using System.Web.UI. ...

  3. 解决Volley请求网络数据返回的数据乱码

    本人可参考http://tieba.baidu.com/p/4039693566 以往一般我们如下写就可以了 StringRequest request=new StringRequest(url, ...

  4. Oracle--存储过程学习进阶

    例1:该存储过程是向xuesheng 表中插入一行数 create or replace procedure student_proc_no is begin , , ); commit; end s ...

  5. Servlet 中文乱码问题及解决方案剖析

    转自:http://blog.csdn.net/xiazdong/article/details/7217022/ 一.常识了解 1.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK ...

  6. JavaWeb学习记录总结(二十九)--Servlet\Session\Cookie\Filter实现自动登录和记住密码

    一.Servlet package autologin.servlet.login; import java.io.IOException;import java.security.MessageDi ...

  7. svn 安装 、使用(1)

    写在开头: 虽然网络极大的方便了我们查找答案,而且有很多人写各样的博客.但每个人在实际中的情况不一样,遇到的问题也不一样,大牛们会把步骤写的很简单,可能真的是怕麻烦,但显然就有一些东西已经不适合一部分 ...

  8. HDU-5792 World is Exploding(树状数组)

    题目大意:给一个整数序列,统计四元组(a,b,c,d)的个数,满足条件1:a<>b<>c<>d:条件2:<a,b>组成一个顺序对,<c,d> ...

  9. 采用PHP函数uniqid生成一个唯一的ID

    http://www.daimajiayuan.com/sitejs-17815-1.html

  10. VGG_19 train_vali.prototxt file

    name: "VGG_ILSVRC_19_layer" layer {  name: "data"  type: "ImageData"  ...