CSS中实现DIV容器垂直居中_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:27:18
原创
1045 人浏览过

1.vertical-align:middle 垂直对齐

如表格元素中的

、 、等,而像
这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

2.text-align:center  文本水平居中

 

一、单行垂直居中

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:

ExampleSourceCode 

DIV{   height:25px;   line-height:25px;   overflow:hidden;  //使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行 }    不过在InternetExplorer6及以下版本中,这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把

完全填充的一种访求而已。可以使用类似下面的代码: DIV{   padding:25px;   }  

这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

 

 

 

 

 

 

 

 

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板