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的微妙关系 ...
随机推荐
- background-position 用法详细介绍
语法: background-position : length || length background-position : position || position 取值: length : ...
- pgbouncer配置
DESCRIPTION pgbouncer is a PostgreSQL connection pooler. Any target application can be connected to ...
- NoSQL之Redis高级实用命令详解--安全和主从复制
Android IOS JavaScript HTML5 CSS jQuery Python PHP NodeJS Java Spring MySQL MongoDB Redis NOSQL Vim ...
- 如何用ABBYY把PDF转换成PPT
在电子科技迅速发展的今天,文件格式转换并不是什么稀罕事,因为现在都是电子化办公,出现很多文件格式,但是不同的场合需要的格式不同,所以常常需要进行文件格式的转换.PDF转换成PPT也是众多文件格式转换中 ...
- python数据类型之int用法
1.查看整型的用法 CODE:print(dir(int))['__abs__', '__add__', '__and__', '__bool__', '__ceil__', '__class__', ...
- 被Play framework狠狠的play了一把
1.起因 早就听说play framework很火,而且是拯救Java程序员的神器,所以在全国纪念抗战胜利之际,本着学(man)习(zu)研(hao)究(qi)的态度想进行一番尝试. 2. 经过 2. ...
- java8新语法
Lambda表达式和函数接口(Functional Interface) // lambda expressions public static void DemoLambda() { // 不使用l ...
- kettle 数据库连接中断重置
项目适用kettle作为etl工具,源数据库为mysql库,目标库为oracle.在持续的循环调度中,经常发现oracle的数据库连接中断,需要重置. 具体报错信息如下: INFO 26-12 23 ...
- ORA-12519, TNS:no appropriate service handler found
解决问题: 有时候连不上数据库是因为连接数到了极限了. select count(*) from v$process --当前的连接数 130 select value from v$paramete ...
- TP控制器(Controller)
控制器的一些方法: Maincontroller.class.php文件: <?php namespace Home\Controller; use Think\Controller; clas ...