div style常用属性_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
div style常用属性
&&自己整理的块样式
阅读已结束，下载本文需要
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩17页未读，
定制HR最喜欢的简历
你可能喜欢宽度高度不固定的div 如何水平居中以及垂直居中
宽度高度不固定div的水平居中演示如下：
水平居中代码：
&div class=&container&&
&div class=&center&&&a href=&#&&1&/a&&a href=&#&&2&/a&&a href=&#&&3&/a&
&div style=&clear:both&&&/div&&/div&
.container{width:500height:80background:#C2300B;margin-left:50padding-top:10text-align:}
.center{display:inline-border:2px solid #}
.center{_display:} /*针对ie6 hack*/
.center a{float:border:1px solid #padding:5px 10margin:10color:#text-decoration:}
代码要点：
父容器container加css属性 text-align:
子容器center加css属性display:inline-
.center{_display:} 为针对ie6的hack
宽度高度不固定的div垂直居中演示如下：
垂直居中代码：
&div id=&vc&&&div id=&vci&&&div id=&content&&
我们垂直居中了，我们水平居中了
&/div&&/div&&/div&
#vc { display: background-color:#C2300B; width:500 height:200 overflow: margin-left:50 }
#vci { vertical-align: display:table- text-align: _position: _top:50%; _left:50%; }
#content { color:# border:1px solid # display:inline- _position: _top:-50%; _left:-50%; }
代码要点：
父容器vc的css属性 display:overflow:
子容器vci的css属性 vertical-align:display:table-
针对ie6的hack，vci容器的 _position:_top:50%; 和content容器的 _position: _top:-50%;
如果不需要水平居中的话，需要注释掉vci容器的text-align:_left:50%;以及content的display:inline-_left:-50%;
宽度高度固定的div垂直居中和水平居中
&div class=&guding&&&div class=&gd&&居中了&/div&&/div&
.guding{width:500height:200background:#c2300b;margin-left:50position:}
.gd{width:50height:20background:#position:top:50%;left:50%;margin-top:-10margin-left:-25}
父容器要用相对定位position:否则的话子元素会相对于浏览器窗口进行绝对定位。
子容器绝对定位，top:50%;left:50%;margin-top，margin-left的值取该容器高度，宽度的一半的负值。
如果相对于浏览器窗口做水平垂直居中的话，比如需要大背景居中，代码如下
&style type=&text/css&&
body{background:#c12b02;}
.main{background:url(你的背景图片地址) no-width:1000height:800position:margin-top:-400margin-left:-500}
&div class=&main&&&/div&
相关文章：
暂时还没有评论.请问用asp.net把div显示在中间怎么显示，是显示在网页中间不是居中【在线等待】
[问题点数：40分，结帖人Protection_avi]
请问用asp.net把div显示在中间怎么显示，是显示在网页中间不是居中【在线等待】
[问题点数：40分，结帖人Protection_avi]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|宽度高度不固定的div如何水平居中与垂直居中（转）
时间： 08:11:33
&&&& 阅读：187
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&宽度高度不固定的div如何水平居中与垂直居中
很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。
如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，js，css都可以实现。
这里主要介绍一下采用css的方法，有什么问题还请各位看官指出。我在这里写了一个demo演示页面，查看比较详细的解说和演示的话，请移步
宽度不固定的div如何设置水平居中：
&style type="text/css"&
.container{width:500height:80background:#C2300B;margin-left:50padding-top:10text-align:}
.center{display:inline-border:2px solid #}
.center{_display:} /*针对ie6 hack*/
.center a{float:border:1px solid #padding:5px 10margin:10color:#text-decoration:}
&div class="container"&
&div class="center"&&a href="#"&1&/a&&a href="#"&2&/a&&a href="#"&3&/a&
&div style="clear:both"&&/div&&/div&
无固定宽度的div水平居中代码要点：
这种div宽度不固定的情况，常见于分页处，由于分页不确定有多少页，所以用于分页的元素所在的容器宽度通常不是固定的。
父容器container加css属性 text-align:子容器center加css属性display:inline-
.center{_display:} 为针对ie6的hack，针对ie6前面的display:inline-的作用是在ie下触发元素的layout，使其haslayout。（）
高度不固定的div如何设置垂直居中
&div id="vc"&&div id="vci"&&div id="content"&
我们垂直居中了，我们水平居中了
&/div&&/div&&/div&
&style type="text/css"&
#vc { display: background-color:#C2300B; width:500 height:200 overflow: margin-left:50&_position: }
#vci { vertical-align: display:table- &_position: _top:50%; }
#content { color:# border:1px solid # &_position: _top:-50%; &}
无固定高度的div垂直居中代码要点：
父容器vc的css属性 display:overflow:
子容器vci的css属性 vertical-align:display:table-
针对ie6的hack，vci容器的 _position:_top:50%; 和content容器的 _position: _top:-50%;
更详细的介绍，下面
&标签：&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/allvie/p/3838046.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！posts - 296,&
comments - 3,&
trackbacks - 0
总结：text-align:对三中浏览器而言，都具有文字/行内元素的嵌套式居中，或者说继承式的居中，只要外面的容器设置了这个属性，那么他内部的所有元素都具有这个属性（意思是，虽然这个属性在谷歌和火狐中并不能对内部DIV有水平居中特效，但是由于它对文字的嵌套居中特效，使得设置这个属性的DIV的内部所有的文字/行内元素，无论嵌套多深，都有水平居中效果）。但对于IE来讲比较特殊，它还对块元素嵌套式的水平居中。
　　& margin:0对3种浏览器而言，都具有一样的特性，就是设置在哪个DIV身上，哪个DIV就在其父容器中水平居中，但是不是嵌套式的，如果还继续想达到里面的每一个DIV元素居中，那么要给每一个DIV，都加上这个属性。需要注意一点，这个属性对3种浏览器而言，对行内元素，和没有被任何包围的文字节点，是没有任何居中效果的
IE：外部div包含的所有东西都嵌套式的居中-----&div内的行内元素和块元素都水平居中，一层层的往里均居中。
火狐、谷歌：内部div水平和垂直都不居中，行内元素嵌套式居中------&div内的行内元素水平居中，内部的块元素不居中
&div id="divOut" style="border:width:500height:400text-align:"&
&div style="border: width: 300 height: 200"&&/div&
IE、火狐、谷歌：内部内容都水平居中，垂直不居中（下面有两种情况，文字有没有被SPAN包围结论都一样）
&div style="border:width:500height:400text-align:"&
&span style="border: width: 300 height: 200"&DIV里面的span,span里面的文字&/span&
&div style="border:width:500height:400text-align:"&
DIV里面的文字内容
阅读(...) 评论()