CSS html 水平 垂直居中整合版.docx
- 文档编号:8509100
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:13
- 大小:20.79KB
CSS html 水平 垂直居中整合版.docx
《CSS html 水平 垂直居中整合版.docx》由会员分享,可在线阅读,更多相关《CSS html 水平 垂直居中整合版.docx(13页珍藏版)》请在冰豆网上搜索。
CSShtml水平垂直居中整合版
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在CSS中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和table布局一样。
不过最近有人问了几个例子,看来对此的需求还不少。
现在就把我经验拿出来分享一下,希望大家鼓鼓掌。
首先,要有一个概念:
凡是table布局可以实现的,CSS一定可以实现。
CSS可以实现的,table未必能做到。
现在来几个例子:
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置line-height和height,并使两值相等,再加上over-flow:
hidden就可以了
.middle-demo-1{
height:
4em;
line-height:
4em;
overflow:
hidden;
}
优点:
1.同时支持块级和内联极元素
2.支持所有浏览器
缺点:
1.只能显示一行
2.IE中不支持等的居中
要注意的是:
1.使用相对高度定义你的height和line-height
2.不想毁了你的布局的话,overflow:
hidden一定要
为什么?
请比较以下两个例子:
[Ctrl+A全部选择提示:
你可先修改部分代码,再按运行]
上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。
如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。
二、多行内容居中,且容器高度可变
也很简单,给出一致的padding-bottom和padding-top就行
.middle-demo-2{
padding-top:
24px;
padding-bottom:
24px;
}
优点:
1.同时支持块级和内联极元素
2.支持非文本内容
3.支持所有浏览器
缺点:
容器不能固定高度
三、把容器当作表格单元
CSS提供一系列diplay属性值,包括display:
table,display:
table-row,display:
table-cell等,能把元素当作表格单元来显示。
这是再加上vertical-align:
middle,就和表格中的valign="center"一样了。
.middle-demo-3{
display:
table-cell;
height:
300px;
vertical-align:
middle;
}
可惜IE不支持这些属性,不过在其他浏览器上显示效果非常完美。
要注意的是:
和一个合法的
、 | 、 、这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。 CSS网页布局DIV水平居中的各种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。 如: (爱摩客)提供的代码片段: div{ height: 25px; line-height: 25px; overflow: hidden; } 这段代码很简单,后面使用overflow: hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。 (爱摩客)提供的代码片段: DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //www.w3.org/1999/xhtml"> body{font-size: 12px;font-family: tahoma;} div{ height: 25px; line-height: 25px; border: 1pxsolid#FF0099; background-color: #FFCCFF; } 现在我们要使这段文字垂直居中显示! |
---|