DIV内容垂直居中
来源:互联网 发布:网络质量监控技术 编辑:程序博客网 时间:2024/06/05 14:17
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在 千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关。 要让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; }
一、行高(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中,都能正常居中了
完整代码
<style type="text/css">.con { text-align:center; width:500px; height:500px; background-color:#0F9; vertical-align:middle; display:table-cell;/*非IE6*/ position:relative;}.con2 { _position:absolute; _top:50%; _left:50%}p { _position:relative; _top:-50%; _left:-50%; width:200px; border:1px solid #000; display:inline-block}</style></head><body><div class="con"> <div class="con2"> <p>我是多行文本,我要水平和垂直都居中。且要完全兼容ff和ie。我是多行文本,我要水平和垂直都居中。且要完全兼容ff和ie。</p> </div></div>
1 0
- div内容垂直居中
- DIV内容垂直居中
- div内容垂直居中
- Div 内容垂直居中
- div内容垂直居中
- DIV内容垂直居中
- div中的内容垂直居中
- div内容垂直居中对齐
- div内容水平居中、垂直居中
- div + css div中的内容垂直居中
- Div+css中内容垂直居中。
- div的内容图片垂直居中代码
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- css实现div内容垂直居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- ABBYY FineReader错误代码142和55
- 剑指Offer面试题43(Java版):n个骰子的点数
- c++/c内存申请与释放
- 并发 防止 重复提交唯一数据
- EntityFrameworkCore中linq转sql
- DIV内容垂直居中
- Android二维码生成与扫描
- 索引解析
- Elasticsearch 配置详解
- 微信小程序-模版渲染
- BIF:python内置函数
- CXF
- MYSQL查看执行计划
- HDU5950 2016ACM/ICPC亚洲区沈阳站现场赛