line-height 与垂直居中!
在此之前,对于line-height 与垂直居中的问题,经常碰到。
比如,图片与span在同一个box中的时候,竟然会各种偏移。要想达到理想的效果真的是各种难。
有时间,决定认真的啃一啃。
一 line-heigtht:
1. line-height: 顾名思义,行高,指代文本中,行与行之间的基线间的距离。
2. 基线: 这里的基线不是指代文字的底部,而是英文字母x 的下沿。
3 行距: 行距表示文字的高度与行高的差距。
4. 内容区域: 行中每一个元素都有一快内容区域,主要由字体的大小决定。
5 行内框: 在默认条件下,行内框是等于内容区域的。在如果设置了行高,那么,行内框就会等于行高,并且在内容区域的两侧添加空白。
6 行框: 行框在默认条件下是等于行内框,但是如果在同一行中,有行高超过了当前元素的行内框高度的时候,当前元素的行框就会默认为最高的行高的高度。
这里的行框的告诉只与本行中的最高的行高的关,与关元素的告诉无关。这也是导致图片和文字在同一行时不能对齐的原因。
7 在有图片时,图片会将行框的高度撑到图片的高度,但同时默认的对其方式为基级对齐方式。
具体如下图所示:
二 vertical-align
垂直居中,这里需要注意的一点就是,vertical-align 只能对行内元素有效,对说类似div,p之类的块级元素是无效的。
需要垂直居中,只需要:vertical-align:middel
三 zoom
曾经一直很奇怪很多的网站为什么给元素总是要加一个zoom:1的样式。
原来这一切都是为了兼容ie 6/7/8 , 用来触发ie的haslayout内部属性。导致ie重新计算自身的高度。
大多数因为浮动所产生和定位问题bug 都可以用zoom来解决。
四 inline-block
inline属性的特点是,行内元素,能够在同一行内显示,但是其高度,宽度,行高,margin,padding 等元素都不能设置。所以就产生了inline-block;
inline-block行内元素,但不失block 的效果。在是在ie 6/7下没有被完全支持。
关于ie 6/7对于 inline-block的不完全支持,也可以采用上面的方法解决。
如:
display:inline-block; *display:inline; zoom:1; width:80px; height:20px; margin:10px; padding:10px; text-align:center; background:#cfc;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>span</title>
<style type="text/css">
.test{
line-height: 50px;
}
.test img{
vertical-align: middle;
height: 50px;
line-height: 50px;
}
.test-span{
line-height: 50px;
} </style>
</head>
<body>
<p class="test"><img src="未标题-1.jpg" width="265" height="203" /><span class="test-span">dd</span></p>
</body>
</html>
这里会存在一个小问题, 图片img会的p元素的顶部存在3像素作用的间距。
百度之,原来是个bug , 解决办法蛮多
第一种就是换doctype为<!doctype html>
其它如果不改doctype可以去设置含有img元素的高度,并且需要float一下就ok了。
.test{
line-height: 50px;
flost:left;
height: 50px;
}
注意问题:这里需要垂直居中,是采用设置img的vertical-align的属性,而不是文本。
当然这也不是绝对的,具体需要看那一个元素的高度更高,就去设置哪一个元素的vertical-align属性。
当然还有一个经验之谈就是在切图的时候,将图的高度切为单数。这样的ie6/7下就不会有多出的1px的问题。
line-height 与垂直居中!的更多相关文章
- 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对于 ...
- css-实现元素垂直居中对齐
css-实现元素/元素内容,垂直居中对齐 一.单行内容的垂直居中(line-height:行高方法) 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 heig ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: <!DOCT ...
- CSS实现垂直居中布局
垂直居中 每日更新前端基础,如果觉得不错,点个star吧
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- 在网页布局中合理使用inline formating context(IFC)
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
- CSS魔法堂:深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
随机推荐
- git的工作流程(分支合并)
git支持很多种工作流程,我们采用的一般是这样,远程创建一个主分支,本地每人创建功能分支,日常工作流程如下: 去自己的工作分支$ git checkout work 工作.... 提交工作分支的修改$ ...
- DB2表结构DDL脚本导出
db2look是导出DDL语句脚本的命令,以下是对db2look的一个简单介绍. 语法:db2look -d <数据库名> -e -t <表名> -o <文件名>. ...
- SQLserver使用映射表进行数据相关操作
基本需求: 老数据有老数据的顺序编码规则,新数据有新数据的顺序编码规则,但是老数据的编码还是要更新相应的东西,新数据也得实时更新,在新数据中已经用新编码规则对老数据对进行编码,在上报表中既要新增新数据 ...
- golang的序列与反序列化
golang写backend之类的应用,还是挺方便的...使用encoding/json包时, 必须注意, 在struct定义的属性必须是exported, 否则不会设置值. 例如:type DRol ...
- jquery 源码学习(*)
最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype.而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法 Jq ...
- 初始twisted(一)
1.与同步模型的优势: 1.有大量的任务,一个时刻内至少有一个任务要运行 2.任务执行大量的I/O,同步模型会因为任务阻塞而浪费大量时间 3.任务之间相互独立,任务内部交互少. 2.与同步模式客户端的 ...
- H5 input type="search" 不显示搜索 解决方法
在IOS(ipad iPhone等)系统的浏览器里打开H5页面.如下写法: <input type="search" name="search” id=" ...
- Learning note for Binding and validation
Summary of my learning note for WPF Binding Binding to DataSet. when we want to add new record, we s ...
- [shell基础]——find命令
find命令选项 -name 按照文件名查找 -type 查找某一类型的文件(b 代表设备块:d 目录:c 字符设备文件:l 符号(软)链接文件:f 普通文件) -size 查找文件长度或者大小 -p ...
- 替换APK中的jar包文件
[Qboy] 2014年12月21日 这几天,我第一次做的android游戏(WE!青春纪)马上就要上线.上线之前需要把各个渠道的SDK加入到我们游戏中,与渠道进行联运.但是商务很给力,一下子联系了1 ...