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的微妙关系 ...
随机推荐
- Tensorflow ——神经网络
Training Data Eval: Num examples: 55000 Num correct: 52015 Precision @ 1: 0.9457Validation Data Eval ...
- QQ登入（6）腾讯微博-获取微博用户信息，发送微博
1.1获取weibo用户信息 //先登入授权,可以参考QQ登入(1) Weibo mWeibo = new Weibo(this, mQQAuth.getQQToken()); mWeibo.getW ...
- PHP闭包研究
闭包也就是PHP的匿名函数, 但是和函数不同的是,闭包可以通过use使用函数声明时所在作用域的变量的值. 形式如下 $a = function($arg1, $arg2) use ($variable ...
- css_三种引入方法
CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 详请:http://www.w3school.com.cn/h.asp 其存在方式有三种:元素内联 ...
- 查看SqlServer的内存使用情况
上一篇提到动态T-SQL会产生较多的执行计划,这些执行计划会占用多少内存呢?今天从徐海蔚的书中找到了答案.动态视图不仅可以查到执行计划的缓存,数据表的页面缓存也可以查到,将SQL整理一下,做个标记. ...
- eclipse修改工程名
直接修改工程可能会产生一些莫名其妙的问题,需遵循以下三步: 1. 右键工程:Refactor->Rename,或选中工程按F2,修改名称 2. 右键工程:Properties->Web P ...
- wap图片滚动特效_无css3 元素js脚本编写
手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上 ...
- [mysql] MariaDB 10.0.10 GTID复制
一:概念理解: 1.TID:Transaction ID,即Mysql服务器的事务ID号. 2.GTID:Global Transaction ID,全局事务ID,在整个主从复制架构中任何两个事 ...
- 【jmeter】测试报告优化<一>
具体问题如下: 1.Date report这里的时间没有正确显示出来 2.Summary里的字段Min Time和Max Time显示的是NaN,没有显示正确的时间. 本文主要解决上述两个问题,具体报 ...
- bzoj4561: [JLoi2016]圆的异或并
Description 在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面 积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个 ...