ydzf.net
当前位置:首页 >> Div上下左右居中 >>

Div上下左右居中

<style type="text/css"><!-- div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid #008800; }--></style><div>让层垂直居中于浏览器窗口</div> 其实解决的思路是这样的:首们需要

外div相对定位.内div绝对定位,left,right,top,bottom都为0,margin设置auto即可

div 的垂直居中 可以用position:relative left=50% top=50% 在这个层里面再建一个divposition:relative left=-50% top=-50% div 的水平居中 可以在body 设置 text-align=center 又或者设置line-height=*px

div中的文字水平居中:text-align:center;即可.div中的文字垂直居中:line-height:值.值等于div的高度.示例:<html><body><div style="width:200px;height:100px;border:1px solid red;text- align:center;line-height:100px;">居中对齐</div></body></html> 希望可以帮到妮.谢谢.

div上下左右居中不难的,你只要这么做就可以实现下面给你说一下如果使一个区块上下左右居中,可以使用JS实现(screen.width-width)/2 //这是左右居中,说明:screen.width是获取屏幕的宽度,第二个width是区块本身的宽度(screen.

给li设置一个高度,比如height:18px ,div{height:18px; line-height:18px;}这样文本就居中了.不过这里用div不好,可以用label标签验证码

div.main { height:400px; width:500px; position: absolute; top: 50%; left: 50%;} div.main { margin-top: -200px; margin-left: -250px;}

<style> div{ position: absolute; width:500px; height:200px; left:50%; top:50%; margin-left:-250px; margin-top:-100px; border: solid 3px red; }</style><body> <div>水平垂直居中</div></body>

相对定位可以自适应分辨率居中

期待看到有用的回答!

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