line-height让文本在块级元素中居中显示总结
一、总结:
line-height不仅可以用在段落文本中控制行与行之间的间距,还可以用来控制文本在li这种块级元素中的位置。
文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式:
关于line-height的详细讲解可以参考沁园春的博客:深入了解css的行高Line Height属性
用的最多的是采用纯数字,设置纯数字,我下面的行高的大小=2.5*16px=40px(字体大小,因为我没有设置字体的大小,所以默认为浏览器字体的大小为 16px)
行间距=行高-字体大小=40px-16px=24px;
文字上下的各半行间距为12px;
所以文字可以在高度为40px的容器中居中显示(垂直居中,水平居中用text-align属性)
css代码:
(每天的学习总结)
line-height让文本在块级元素中居中显示总结的更多相关文章
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html页面中块级元素的居中
第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...
- span(行级元素)在不定高的div(块级元素)中垂直居中的方法
设置父级元素: align-items: center; display: flex;
- css布局:块级元素的居中
一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width: ...
- html中行级元素的居中显示。
垂直居中.以label标签为例. <style> #label1{ vertical-align:middle; line-height:40px;<*父元素的height*> ...
- web兼容学习分析笔记--块级、内联、内联块级元素
一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...
- (转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
- html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
随机推荐
- 设置drawable图片
google官方建议在textView和imageView挨着的时候,建议使用drawable来显示图片 第一个方法:setCompoundDrawablesWithIntrinsicBounds(D ...
- view的加载
这是一个listpopwindow的布局,如果listview在relativeLayout之后写的那么listview就会把relativeLayout给覆盖掉,这证明布局的加载是按照布局文件写的先 ...
- Sqlserver 远程连接的 TCP/IP 和 Named Pipes的区别
TCP/IP: TCP/IP是 Internet 上广泛使用的通用协议.它与互连网络中硬件结构和操作系统各异的计算机进行通信.TCP/IP包括路由网络流量的标准,并能够提供高级安全功能.它是目前在商 ...
- jQuery关于Select的操作
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- mysql 操作突然断网,MySQL: “lock wait timeout exceeded”
show processlist;//显示所有进程select * from information_schema.innodb_trx;//查询锁的进程-- kill 310;//杀掉锁进程
- 工作中遇到的问题--实现程序运行时就加载CustomerSetting的第二种方法
写一个自定义注解 @Target({ElementType.FIELD, ElementType.PARAMETER, ElementType.METHOD})@Retention(Retention ...
- resin的基本操作
1.什么是resin? resin是CAUCHO公司的产品,是一个非常流行的支持servlets和jsp的引擎,速度非常快.Resin本身包含了一个支持HTTP/1.1的WEB服务器.虽然它可 ...
- Codeforces Round #149 (Div. 2)
A. Heads or Tails 枚举. B. Big Segment \(L=min(l_i),\ R=max(R_i)\) 判断是否存在区间\([L,R]\). C. King's Path 单 ...
- Python学习(3)——if语句
虽然在之前接触过C.C++.Java等,但是还是觉得Python写出来的好看o(≧v≦)o~,简洁明了! score = raw_input("score:") score=int ...
- Java 标准日志工具 Log4j 的使用(附源代码)
源代码下载 Log4j 是事实上的 Java 标准日志工具.会不会用 Log4j 在一定程度上可以说是衡量一个开发人员是否是一位合格的 Java 程序员的标准.如果你是一名 Java 程序员,如果你还 ...