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的问题。
转载于:https://www.cnblogs.com/alphafly/p/4692619.html
line-height 与垂直居中!相关推荐
- html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
- 如何将所有浏览器的div垂直居中?
我想用CSS将div垂直居中. 我不需要表或JavaScript,而只需要纯CSS. 我找到了一些解决方案,但是所有这些解决方案都缺少Internet Explorer 6支持. <body&g ...
- java xml textview居中_android—图文垂直居中 TextView+SpannableString
自我感觉做什么事情都是事倍功半,同样性格还是丢三落四的人.记录每一次解决问题的思路经过,以供自我学 最终效果 前几天让做一个效果如上图,于是引发了一些列的思路风暴: (思路1)TextView+Htm ...
- 真正的能理解CSS中的line-height,height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
- CSS中的line-height,height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
- 使用vh来制作高度自适应页面和元素垂直居中
为什么80%的码农都做不了架构师?>>> vh单位 vh是CSS3中的一个长度单位,其值为:100vh == 视窗高度.即如果窗口高度为500px,那么 1vh == 5px. ...
- CSS实现垂直居中布局
垂直居中 首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果),并清除<body>的默认样式. html,body{margin: 0 ...
- css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法 文本(文字)内容属于行内元素 行内元素水平垂直居中方法 方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
- 每日一个css小技巧 6/10 水平垂直居中
行内元素水平垂直居中 1 常规设置 一句话总结: text-align设置水平居中,line-height = height 设置垂直居中 2 父盒子模拟为表格 块级元素水平垂直居中 1 positi ...
- css设置按钮竖直方向居中_css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: Document ...
最新文章
- 收藏:因为有这篇Sublime Text使用教程,我立即卸载掉了Notepad+...
- lightswitch 添加 TreeView 控件
- 功败垂成的王安石是大宋最后的体面
- Timus 1114. Boxes
- 【报告分享】汽车行业“无接触”营销风险初探.pdf(附下载链接)
- pyqt5_tools下找不到designer.exe新版的designer.exe放在\pyqt5_tools\Qt\bin下
- java文件上传中间件_maven工程 java 实现文件上传 SSM ajax异步请求上传
- Linux进程的管理与调度(五) -- Linux下0号进程的前世(init_task进程)今生(idle进程)
- 华硕aura完全卸载_闲谈:记一次华硕电脑维修。
- 软件测试度量的关键指标,软件测试度量指标简介
- ireasoning mib browser license expired
- [红尘]被风吹过的夏天
- 【C语言编程】 配对碱基链
- eclipse java验证码_spring整合kaptcha验证码
- Spring boot 更改启动LOGO,佛祖保佑,永无BUG或神兽保佑
- RatingBar的使用
- 把Windows给印度人做,微软大佬都去搞小工具了
- 如何将python项目部署到服务器_怎么把python部署到服务器
- bank conflict
- 网络打印服务器记录打印文件,使用 CNAME 记录合并打印服务器 - Windows Server | Microsoft Docs...
热门文章
- mysql 分页效率_MYSql分页查询效率提高
- java中unicode显示乱码_Java 已知Java系统编码是GBK,jtextarea从一编码为Unicode的文本中读取数据,出现乱码,怎么正常显示?...
- matlab guide对话框+滑动条+弹出式菜单+列表框的使用
- md 生成目录 码云_搭建简易博客方案
- java中sql语句怎么把开始和结束时间作为参数写sql查询_JDBC数据库连接怎么操作?...
- 基于Java+SpringBoot+vue+element实现校园闲置物品交易网站
- android fragment 弹出对话框,Android中使用Dialogfragment显示对话框
- 电脑有回声_电脑连接麦克风有回音怎么办?麦克风回声的解决方法
- 计算机设计大赛国奖作品_3. 需求分析
- 【OpenCV 例程200篇】69. 连续非周期信号的傅立叶系数