sytn.net
当前位置:首页 >> Div自适应居中 >>

Div自适应居中

你犯了两个错误:1、position不能设为absolute,否则自动边距是无效的,也不能使用浮动定位.2、左右边距都要设为自动才能居中.这样就可以了:<style type="text/css">.d { width: 200px; height: 350px; background-color: #000; margin-top: 20px; margin-left: auto; margin-right: auto; }</style><div class="d"> dddd</div> 如有帮助,请点击采纳按钮,谢谢支持~

<p>你犯了两个错误:</p> <p>1、position不能设为absolute,否则自动边距是无效的,也不能使用浮动定位.</p> <p>2、左右边距都要设为自动才能居中.</p> <p></p> <p>这样就可以了:</p> &lt;style type="text/css"&gt;.d { width: 200px;

1、如果文字不换行的话,那么把文字行高line-height设为div的高度height即可;2、如果文字会换行,那么有2个方法,第一方法,设置适当的行高line-height后,在div上设置上下方向的padding值,div高度是自适应的,这样在视觉上就会感觉是垂直居中于div的;第二个方法,你把div换成table布局或者在div内套一个table,因为td默认情况下内容是偏左并且垂直居中的;

第一种方法:将 div 设为 表格的单元格 (display: table-cell),然后设置纵向居中 (vertical-align: middle).wrap_4 {height: 800px; display: table-cell; vertical-align: middle;}第二种方法:需要知道 logo.gif 的高度,设置 img 的 position 为 absolute

如果是纯文本的内容的画,那么直接style="text-align:center;line-height:div的高度"

水平居中容易加个代码margin:0 auto;简直居中的话目前没有完美的方法,我是测试过的,只能是元素的行高等于页面的高度就垂直居中了例如body {height:800px;width:700px;margin:0 auto; /*这里的意思是页面的上下边距为0 ,左右边距为自动,所以放在页面的任何div都将相对页面水平居中,上下如果改成auto是无效的,我试过的*/}div {line-height:800px;/*行高等于页面的高度就垂直居中了,或者你可以改成百分比自适应的那种,不过自适应的网站都不是主流,我们老师以前讲过的,专业的网站都是固定尺寸的*/}目前只能用这个方法上下左中居中

第一个div属性position:absolute;left:50%; top:50%; margin-left:-(width/2);margin-top:-(height/2);注意第一个div高度宽度都应该是定值的;意思是两个div的宽高都是用百分比设置的,那最好是让他俩有点父子关系,或者,第一个div只能是做成弹窗显示的,居中在整个屏幕中央了

这个最好定宽,定高,如果自适应那么就需要要js来进行控制了.假如div宽200px,高100px,那么居中样式就是这样:position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-110px;这样就居中了,如果是自适应,需要使用js获取div的宽度和高度,然后将margin-top:-高度/2像素,同理,margin-left设置-宽度/2像素.

我遇到这种情况直接div里放table,table里再放div,就实现了 = =或者可以设置 子div.marginTop=(父div.height-子div.height)/2

哈哈,选我吧!乐百赞1.定义宽度,2.然后margin:0pxauto即可居中

网站首页 | 网站地图
All rights reserved Powered by www.sytn.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com