css设置div垂直居中的方法:1、设置它的实际高度height和所在行的高度【line-height】相等;2、设定Padding,使上下的padding值相同即可。

本教程操作环境:windows7系统、css3版,DELL G3电脑。
css设置div垂直居中的方法:
一、单行垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
立即学习“前端免费学习笔记(深入)”;
如:
div {
height:25px;
line-height:25px;
overflow:hidden;
}这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
单行文字实现垂直居中 现在我们要使这段文字垂直居中显示!
二、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把
div {
padding:25px;
}这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。
多行文字实现垂直居中
现在我们要使这段文字垂直居中显示!
相关文章
css 想让元素在右下角固定怎么办_position fixed bottom 0 right 0
css 想让菜单展开收起时过渡自然怎么办_设置高度和透明度过渡属性
css 想给表单输入框非法内容显示红色边框怎么办_使用 :invalid 伪类设置边框
css 为什么推荐全局设置 box sizing_通过盒模型统一管理说明优势
css 页面样式覆盖异常怎么办_检查 style 与 link 的优先级关系
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门AI工具










