js实现未知宽高的元素在指定元素中垂直水平居中
本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果，下面就以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box{
width:200px;
height:150px;
background:blue;
position:relative;
}
#antzone{
background:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
var oantzone=document.getElementById("antzone");
var w=oantzone.offsetWidth;
var h=oantzone.offsetHeight;
oantzone.style.position="absolute";
oantzone.style.left="50%";
oantzone.style.top="50%";
oantzone.style.marginLeft=-(w/2)+"px";
oantzone.style.marginTop=-(h/2)+"px";
}
</script>
</head>
<body>
<div id="box">
<spanj id="antzone">蚂蚁部落</span>
</div>
</body>
</html>
一.实现原理:
虽然css为明确给出 span元素的尺寸，但是它毕竟有一个尺寸的，这个尺寸可以使用offsetWidth和offsetHeight属性获取，然后将此span元素设置为 绝对定位，然后再将left和top属性值分别设置为50%,但是这个时候并不是span元素的中心点垂直水平居中，而是span元素的左上角垂直水平居 中，然后在设置span元素的负的外边距，尺寸是span元素宽高的一半，这样就实现了垂直水平居中效果。
js实现未知宽高的元素在指定元素中垂直水平居中的更多相关文章
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- table-cell实现未知宽高图片，文本水平垂直居中在div
<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...
- 已知宽高和未知宽高的div块的水平垂直居中
//已知宽高的情况 .div1_container{ border:1px solid #00ee00; height:300px; position:relative; } ...
- CSS子元素居中(父元素宽高已知，子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- js获取各种宽高方法
屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- JS/jQ常用宽高及应用
关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...
随机推荐
- Linux下PHP+MySQL+CoreSeek中文检索引擎配置
说明: 操作系统:CentOS 5.X 服务器IP地址:192.168.21.127 Web环境:Nginx+PHP+MySQL 站点根目录:/usr/local/nginx/html 目的:安装co ...
- linux如何查看磁盘剩余空间
[root@Linux var]# df -hl 文件系统 容量 已用 可用 已用% 挂载点 /dev/hdb2 75G 75G 0 100% / /dev/hdb1 99M 9.2M 85M 10% ...
- Eclipse 复制按钮卡死
复制按钮和按住CTRL链着超链接 有冲突,Eclipse不知道是复制还是链到元素,所以卡死 Eclipse/MyEclipse中使用复制粘贴功能卡的解决办法 最近在MyEclipse中编辑代码时,使用 ...
- $.browser.msie 报错 null
jQuery 1.9 移除了 $.browser 的替代方法 January 16th, 2013FwolfLeave a commentGo to comments 授权方式:署名,非商业用途,保持 ...
- Web前端开发笔试&面试_05_other 2016104399MS
1.数据传送的方式,get post 的区别是? 2.你要怎么绑定页码(比如给你第三页,)? 3.数据流是如何实现,用for 循环? 4.轮播怎么实现?用原生JS实现. 5.布局,B是固定宽度,A的内 ...
- shell之变量与read
环境变量 set 环境变量可供shell以外的程序使用 shell变量 env shell变量仅供shell内部使用 set:显示(设置)shell变量 包括的私有变量以及用户变量,不同类的shell ...
- Linux-Hostname-details
转自:http://www.cnblogs.com/kerrycode/p/3595724.html 当我觉得对Linux系统下修改hostname已经非常熟悉的时候,今天碰到了几个个问题,这几个问题 ...
- 【转】POP3、SMTP和IMAP之间的区别和联系
POP3 POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议.它是因特网电子邮件的第 ...
- HBase(五): HBase运维管理
HBase自带的很多工具可用于管理.分析.修复和调试,这些工具一部分的入口是hbase shell 客户端,另一部分是在hbase的Jar包中. 目录: hbck hfile 数据备份与恢复 Snap ...
- javascript取得机器名，用户名，读写注册表，启动应用程序
javascript取得机器名,用户名,读写注册表,启动应用程序//javascript有个特殊的对象ActiveXObject,通过它可以访问windows的本地文件系统和应用程序,比如:有的时候我 ...