你对DIV水平居中和垂直居中的解决方法是否了解,这里和大家分享一下,相信本文介绍一定会让你有所收获。
DIV水平居中和垂直居中的多种解决方案
在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。在div-css.net中,大量的文章介绍了这些知识。在和别人合作的时候,你的代码的自适应性就需要做到最大程度的好。你自己在做自己的网页的时候或许可以保证在视觉上是居中的,但是如果让这个元素或者他的父元素变大了,你还能保证居中吗?
vertical-align是个不错的属性,但是这个属性起初是针对表格的cell的。当然这个属性虽然对块级元素不起作用,但是对行内元素比如span还是有作用的(这时候,这个属性设置为负值元素内容就下移,正值则上移)。
下面是比较专业的垂直居中的集中解决方案。记录于此,以便查阅。
1、单行垂直居中
文字在层中垂直居中vertical-align属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
ExampleSourceCode[]
2、层水平居中
设置div的宽度小于父div的宽度,设置margin:0auto;,即可让div居中。
ExampleSourceCode[]
- #parentdiv
- {
- width:500px;
- }
- #childdiv{
- width:200px;
- margin:0auto;
- }
3、层中的文字水平居中
在childdiv的css加上text-align:center;
ExampleSourceCode[]
- #parentdiv
- {
- width:500px;
- }
- #childdiv{
- width:200px;
- margin:0auto;
- text-align:center;
- }
#p#4、DIV层垂直居中
ExampleSourceCode[]
- position:relative;display:table-cell;vertical-align:middle;">
- style="background:red;position:static;position:absolute\9;top:50%;">
- style="background:blue;position:relative;top:-50%;">
- div>
- div>
- div>
- div>
5、DIV层垂直水平居中,英文超长换行
ExampleSourceCode[]
- style="height:375px;width:275px;position:relative;display:table-cell;vertical-align:middle;">
- style="position:static;position:absolute\9;top:50%;">
- word-break:break-all;margin:0auto;">
- div>
- div>
- div>
- div>
- div>
6、div垂直滚动
ExampleSourceCode[]
- style="width:160px;height:260px;overflow-y:scroll;border:1pxsolid;">
- div>
#p#7、垂直居中和使用text-align水平居中
ExampleSourceCode[]
- style="height:375px;width:275px;position:relative;
- display:table-cell;vertical-align:middle;">
- style="position:static;position:absolute\9;top:50%;">
- style="position:relative;top:-50%;text-align:center;">
- word-break:break-all;text-align:left;">
- div>
- div>
- div>
- div>
- div>
- div>
8、垂直居中和使用margin水平居中
ExampleSourceCode[]
- height:375px;border:solidred;">
- style="height:375px;width:275px;position:relative;
- display:table-cell;vertical-align:middle;">
- style="position:static;position:absolute\9;top:50%;">
- style="position:relative;top:-50%;">
- TABLE-LAYOUT:fixed;word-break:break-all;">
- div>
- div>
- div>
- div>
- div>
【编辑推荐】
- DIV CSS隐藏内容样式方法详解
- IE6.0对padding的解读分析
- 揭露CSS中margins折叠现象内幕
- 七大CSS选择符用法说明
- 技术分享 如何使用CSS控制超链接文字样式
分享题目:解决DIV水平居中和垂直居中的多种方案
分享路径:http://www.csdahua.cn/qtweb/news44/460144.html网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网
- 公司注销了域名需要注销吗?(我们域名在原服务商那做主体注销已经完成)
- 阿里开源创新互联混部系统Koordinator,助力提升计算资源利用率
- MapReduce编程模型是什么
- 进口服务器机柜批发价格影响因素
- 战略设计之上下文映射和系统分层架构
- 虚拟化技术如何有效控制网络成本
- dns污染了怎么办?(如何清除网站测试数据-云服务器问题)
- 如何准确判断数据库中的数据是否存在?(如何判断数据库数据存在)
- Linux加入用户组:一步一步指南(linux添加到用户组)
- 海外云主机有什么好?(美国云主机的特点有哪些)
- 不道早已是什么意思
- 企业安全管理技巧让员工成为安全帮手
- 移动的网络盒子高清线用不用换路由器
- 服务器和处理器的区别(服务器cpu和普通cpu的区别?)
- 织梦企业模板有哪些特点,如何使用织梦企业模板快速打造专业网站