line-height和vertical-algin
项目中,经常会用到line-height和vertical-algin来解决垂直居中的问题,但对其原理和应用限制却很少了解。因此做了一下总结:
line-height具有继承性,对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致(已验证),当设置了line-height但是没有设置高度的情况下,高度由line-height决定。
vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同,但是它的middle值得实现却基本相同,因此用来实现垂直居中是可以的。默认是baseline居中。只对inline-block和table-cell的元素起作用。
line-height和vertical-algin的更多相关文章
- HTML: vertical algin Big/small div in same row (bootstrap)
Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...
- How to Take Control of Your Line Height in Outlook.com
Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- leetcode-[3]Max Points on a Line
Given n points on a 2D plane, find the maximum number of points that lie on the same straight line 思 ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- Box Model,边距折叠,内联和块标签,CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
随机推荐
- ScriptX使用
自己研究了一下ScriptX并且做了个事例,希望可以帮到需要的同学 下载地址: http://download.csdn.net/detail/jine515073/7234575
- libRTMP文档
https://rtmpdump.mplayerhq.hu/ 原文地址:http://rtmpdump.mplayerhq.hu/librtmp.3.html git clone git://git. ...
- dvi 中的内容居中
text-align:right; 文本居中 line-height:35px;*垂直居中*
- Android.mk文件c++头文件包含问题
Eclipse 中 Android.mk文件c++头文件包含问题 jni中的目录结构如下: 编译找不到头文件 LOCAL_PATH := $(call my-dir)LOCAL_C_INCLUDES ...
- android ContentProvider 笔记
学习android的contentprovider.笔记记录于此. contentprovider作用是将数据共享给其他的应用. 参考链接 https://www.tutorialspoint.com ...
- e595. Drawing an Image
See also e575 The Quintessential Drawing Program and e594 Reading an Image or Icon from a File. publ ...
- LabVIEW中数组的自动索引
我们在LabVIEW里面使用While或者是For循环结构的时候,就会发现每一个循环中在它们的循环结构的边界都可以自动完成一个数组元素的索引或累积.LabVIEW中循环结构的这种能力就叫做自动索引(A ...
- php如何解决多线程同时读写一个文件的问题
<?php header("content-type:text/html;charset=utf-8"); $fp = fopen("lock.txt", ...
- 将android程序中的数据库导出到SD卡
private void copyDBToSDcrad() { String DATABASE_NAME = "数据库文件名"; String oldPath = "da ...
- SQL Server 2008 收缩日志(log)文件
USE TestDB; GO ALTER DATABASE TestDB SET RECOVERY SIMPLE; --设置简单恢复模式 GO ); GO ALTER DATABASE TestDB ...