使用DIV设计模仿Windows的弹出对话框,经常需要使DIV中的内容水平、垂直居中。DIV水平居中的方法很简单,直接使用如下代码即可:
div居中 在线演示
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
/* css注释:为了观察效果设置宽度 边框 高度等样式 */
DIVCSS5实例
谈到垂直居中,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊!但事实却不是这么简单,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的
、、等,而像、这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。
下面介绍几种使DIV内容chuizhi垂直居中的方法:
一、单行内容垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
单行文字实现垂直居中
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
现在我们要使这段文字垂直居中显示!
【发表评论0条 】