如何让div中的内容垂直居中(转)

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关。 

如何让div中的内容垂直居中 来源:黄超

要让div中的内容垂直居中,无非有以下几种方法,等我一一列举:

一、行高(line-height)法

 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

  这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距(padding)法

 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

p { padding:30px; }

  这段代码的效果和line-height法差不多。

三、模拟表格法

 模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示,用到的CSS属性有display、vertical-align等。
先看下面的Html代码:  

<div id="box"> <div id="content">居中显示</div> </div>

  参照以上Html代码,让最外面名为box的Div呈表格样式显示,然后再让box中名为content的Div呈单元格显示,并利用vertical-align:middle让其垂直居中,这样就模拟出来和表格一样的显示方式,CSS代码如下:

#wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099;   background:#000;   width:400px; }

  但这种方法有一个弊端,由于IE浏览器对高度理解会产生错误,所以这种方法仅对Firefox有效,对IE无效,既然这样,我们就需要找出对IE的修正方法,于是有了另外一种方法。

四、定位法

顾名思义,定位法是利用CSS定位属性position对元素进行定位的方法,也属于模拟方法,不过它对IE的支持还是不错的。  它的Html代码为:

<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>

  这段代码比上一种方法中多出了一个名为sub的Div,它的作用是用来定位,原理就是:首先让box出于相对定位,sub相对box出于相对定位,位于box垂直方向的50%,再让content中的真正内容出于sub垂直方向的-50%,从而制作出content在box中垂直居中的效果,它们的CSS代码如下:

#wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative;

} 
#subwrap { position:absolute;  top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }  这段代码无论是在IE中还是Firefox中,都能正常居中了。  当然,肯定还有许多垂直居中的方法,欢迎各位朋友交流补充。


				
时间: 2024-10-10 21:41:03

如何让div中的内容垂直居中(转)的相关文章

[转]如何让div中的内容垂直居中

转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最

div中的内容垂直居中实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">           <head>         <title>   

如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:10

bobo 如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:10

CSS总结div中的内容垂直居中的五种方法

文章目录 一.行高(line-height)法 二.内边距(padding)法 三.模拟表格法 四.CSS3的transform来实现 五:css3的box方法实现水平垂直居中 六:flex布局(2018/04/17补充) 一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这

div中让内容能不换行就尽量不换行.【纯原】

div中让内容能不换行就尽量不换行. <html> <head> <style type="text/css"> </style> </head> <body> <div style="width:250px"> <span>悲莫悲兮生别离,乐莫乐兮新相知</span> <div style="float:right"> |=|

ExtJS如何取出某个DIV中的内容

在使用ExtJS的时候,不免我们要在某个DIV中取出DIV的内容,因此通过查找api和相关资料应该向如下方式进行取值 1 Ext.onReady(function(){ 2 var panel = new Ext.Panel({ 3 title:'Ext.core.domhelper.applystyles示例', 4 width:300, 5 height:200, 6 renderTo:'sub1', 7 html:"<div id='div1' style='height:160px

让DIV中的内容水平和垂直居中

让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1.让层水平居中 1 2 3 4 5 .cla

通过CSS控制页面中的内容垂直居中的方法

方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如果将文字的行高设为500px,并且外面的容器高度也设为500px,就可以实现这行文字垂直居中,这样做的缺点是如果内容过多,文字就跑到了下一行,就不是居中了,所以限制较多. 具体代码: <html> <head> <style> body { margin: 0;