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文字渐变动画不平滑怎么办_使用keyframes color opacity实现渐变效果
css 字体间距无效怎么办_letter-spacing 调整与继承
css布局属性与浮动配合使用_float与flexbox结合应用
页面样式不生效怎么办_检查link外部样式是否正确引入
css::before文字换行不正确怎么办_结合white space和display block调整
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门AI工具










