登录  /  注册

div垂直居中的N种方法以及多行文本垂直居中的方法_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 08:50:36
原创
1713人浏览过

在说到这个问题的时候,也许有人会问css中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的css

Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生

效,例如表格元素中的

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

作用。

相关教程:div水平居中的N种方法

一、单行垂直居中

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

如:

div {

height:25px;  

line-height:25px;  

overflow:hidden;  

}  

这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多CSS教

程。

单行文字实现垂直居中

body { font-size:12px;font-family:tahoma;}

div {

height:25px;

line-height:25px;

border:1px solid #FF0099;

background-color:#FFCCFF;

}

现在我们要使这段文字垂直居中显示!

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

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的

padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把

完全填充的一种访求而已。可以使用类似下

面的代码:

div {

padding:25px;  

}  

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

多行文字实现垂直居中

body { font-size:12px;font-family:tahoma;}

div {

padding:25px;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

现在我们要使这段文字垂直居中显示!     <p>div {</p>     <p>padding:25px;</p>     <p>border:1px solid #FF0099;</p>     <p>background-color:#FFCCFF;</p>     <p>}</p>     <p></p>
登录后复制

三、多行文本固定高度的居中

在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display

属性能够模拟

,所以我们可以使用这个属性来让
模拟
就可以使用vertical-align了。注意,display:table和

display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个

元素:

div#wrap {

height:400px;  

display:table;  

}  

div#content {  

vertical-align:middle;  

display:table-cell;  

border:1px solid #FF0099;  

background-color:#FFCCFF;  

width:760px;  

}  

多行文字实现垂直居中

body { font-size:12px;font-family:tahoma;}

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

现在我们要使这段文字垂直居中显示! Webjx.Com     <p>div#wrap {</p>     <p>height:400px;</p>     <p>display:table;</p>     <p>}</p>     <p>div#content {</p>     <p>vertical-align:middle;</p>     <p>display:table-cell;</p>     <p>border:1px solid #FF0099;</p>     <p>background-color:#FFCCFF;</p>     <p>width:760px;</p>     <p>}</p>     <p></p>
登录后复制

这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在

Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素

进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的

高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:

 

 

 

如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进

行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上

边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去

,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:

div#wrap {

border:1px solid #FF0099;  

background-color:#FFCCFF;  

width:760px;  

height:400px;  

position:relative;  

}  

div#subwrap {  

position:absolute;  

border:1px solid #000;  

top:50%;  

}  

div#content {  

border:1px solid #000;  

position:relative;  

top:-50%;  

}  

当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出

处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究)

多行文字实现垂直居中

body { font-size:12px;font-family:tahoma;}

div#wrap {

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

position:relative;

}

div#subwrap {

position:absolute;

top:50%;

}

div#content {

position:relative;

top:-50%;

}

现在我们要使这段文字垂直居中显示!     <p>div#wrap {</p>     <p>border:1px solid #FF0099;</p>     <p>background-color:#FFCCFF;</p>     <p>width:760px;</p>     <p>height:500px;</p>     <p>position:relative;</p>     <p>}</p>     <p>div#subwrap {</p>     <p>position:absolute;</p>     <p>border:1px solid #000;</p>     <p>top:50%;</p>     <p>}</p>     <p>div#content {</p>     <p>border:1px solid #000;</p>     <p>position:relative;</p>     <p>top:-50%;</p>     <p>}</p>
登录后复制
登录后复制

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可

以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:

div#wrap {

display:table;  

border:1px solid #FF0099;  

background-color:#FFCCFF;  

width:760px;  

height:400px;  

_position:relative;  

overflow:hidden;  

}  

div#subwrap {  

vertical-align:middle;  

display:table-cell;  

_position:absolute;  

_top:50%;  

}  

div#content {  

_position:relative;  

_top:-50%;  

}  

至此,一个完美的居中方案就产生了。 

多行文字实现垂直居中

body { font-size:12px;font-family:tahoma;}

div#wrap {

display:table;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

_position:relative;

overflow:hidden;

}

div#subwrap {

vertical-align:middle;

display:table-cell;

_position:absolute;

_top:50%;

}

div#content {

_position:relative;

_top:-50%;

}

现在我们要使这段文字垂直居中显示!     <p>div#wrap {</p>     <p>border:1px solid #FF0099;</p>     <p>background-color:#FFCCFF;</p>     <p>width:760px;</p>     <p>height:500px;</p>     <p>position:relative;</p>     <p>}</p>     <p>div#subwrap {</p>     <p>position:absolute;</p>     <p>border:1px solid #000;</p>     <p>top:50%;</p>     <p>}</p>     <p>div#content {</p>     <p>border:1px solid #000;</p>     <p>position:relative;</p>     <p>top:-50%;</p>     <p>}</p>
登录后复制
登录后复制

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号