在此之前，对于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 与垂直居中!的更多相关文章

  1. 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

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. css-实现元素垂直居中对齐

    css-实现元素/元素内容,垂直居中对齐 一.单行内容的垂直居中(line-height:行高方法) 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 heig ...

  5. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  6. css实现垂直居中6种方法

    在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: <!DOCT ...

  7. CSS实现垂直居中布局

    垂直居中 每日更新前端基础,如果觉得不错,点个star吧

  8. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  9. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  10. CSS魔法堂：深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

随机推荐

  1. .Net码农学Android---五分钟了解布局

    在android中应用的界面是以xml来组织的,这一点和WPF相似,通过配置xml文件我们可以灵活的构建出你自己想要的界面. 而在所有的xml界面文件中,根节点必须是布局,即先有布局,然后在布局中组织 ...

  2. Resource is out of sync with the file system

    Resource is out of sync with the file system解决办法: 在eclipse或mycelipse中,启动run on server时或查看项目文件时报错:Res ...

  3. WIFI 物理组件

    物理组件参考:http://book.51cto.com/art/201404/435813.htm SDIO总线参考:此总线sd卡连接也有关系.(http://www.linuxidc.com/Li ...

  4. Android--发送短信，并且通知发送方

    1.发送短信涉及到权限,我们需要把权限加上 2.当我们发送短信时,不管发送是否成功,接收方是否接收到,系统都会发送广播 3.这时我们注册广播去接收一下就可以了 4.布局文件很简单,里面就两个EditT ...

  5. 九度oj 1541 二叉树

    原题链接:http://ac.jobdu.com/problem.php?pid=1541 简答题如下: #include<algorithm> #include<iostream& ...

  6. UITabelView 高级（自定义Cell）

    自定义一个Cell 当我们要显示复杂数据的时候,例如要做一个扣扣聊天界面,或是新闻列表,系统的行已经不能满足我们的要求,这个时候我们可以通过自定义这个行,让他显示更多复杂结构的样式. 自定义cell就 ...

  7. Swift 中使用Nimble 库进行单元测试

    Nimble 从字面上看是 敏捷,灵活 的意思.Nimble 是一个库,一个 断言库.这个库一般用于单元测试.Xcode 6 为我们集成了 XCTest 单元测试库.在正式介绍 Nimble 之前,我 ...

  8. 最近对python颇有兴趣

    因为最近租的房子到期了,于是在豆瓣小组找房子,萌生利用python爬虫去抓取小组的房源信息. 最近2个小玩意准备做一下,mark 一下 1.豆瓣租房小组Python爬虫抓取 2.51job 职位抓取

  9. Hibernate从入门到精通（十）多对多单向关联映射

    上一篇文章Hibernate从入门到精通(九)一对多双向关联映射中我们讲解了一下关于一对多关联映射的相关内容,这次我们继续多对多单向关联映射. 多对多单向关联映射 在讲解多对多单向关联映射之前,首先看 ...

  10. skill-如何禁止浏览器的默认行为

    在默认情况下,点击链接,浏览器会向href所指的地址发送请求, 点击表单提交,浏览器会将表单中的数据进行发送 如果要禁止,可以使用如下语句: