JS实现div居中示例
发布时间:2024-04-28 09:47:39
标签:div居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS实现div居中</title>
<style>
/*外层div居中*/
#main {
position: absolute; /*极为重要*/
background-color: blue;
width:400px;
height:200px;
/*left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;*/
border:1px solid #00F;
}
#content {
position: absolute; /*极为重要*/
background-color: yellow;
width: 200px;
height: 100px;
/*left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;*/
/*div内部文字居中*/
text-align: center;
line-height:100px; /*行间距和div宽度相同*/
}
</style>
<body>
<div id="main">
<div id="content">
Sun
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// 获取浏览器窗口
var windowScreen = document.documentElement;
// 获取main的div元素
var main_div = document.getElementById("main");
// 通过窗口宽高和div宽高计算位置
var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 + "px";
var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 + "px";
// 位置赋值
main_div.style.left = main_left;
main_div.style.top = main_top;
// 获取mcontent的div元素
var content_div = document.getElementById("content");
var content_left = (main_div.clientWidth - content_div.clientWidth)/2 + "px";
var content_top = (main_div.clientHeight - content_div.clientHeight)/2 + "px";
content_div.style.left = content_left;
content_div.style.top = content_top;
}
</script>
</body>
</html>
0
投稿
猜你喜欢
- 实例如下:<?php /** * @name thumb 缩略图函数 * @param sting  
- 链表的反转是一个很常见、很基础的数据结构题,输入一个单向链表,输出逆序反转后的链表,如图:上面的链表转换成下面的链表。实现链表反转有两种方式
- 一、 技术要点 我们都知道Windows应用程序在运行时会启动一个进程,其总包括若干线程,不同的进程之间通信是开发分布
- python中如何for循环把字符串添加到列表?实例:1.单个字符串用for循环添加到列表中:# 把L1中的字符串添加到列表alist里面L
- logging模块介绍Python的logging模块提供了通用的日志系统,熟练使用logging模块可以方便开发者开发第三方模块或者是自己
- javascript编写的窗口代码,可以关闭显示窗口,可以最小化或还原窗口大小,还可以鼠标移动窗口,不错的一个功能。截图如下:<htm
- 这是《python基础教程》后面的实践,照着写写,一方面是来熟悉python的代码方式,另一方面是练习使用python中的基本的以及非基本的
- 本章将覆盖所有在Python中使用的基本I/O功能。有关更多函数,请参考标准Python文档。打印到屏幕上:产生输出最简单的方法
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 实例如下所示:import numpy as npW_val, b_val = sess.run([weights_tensor, bias
- 一、外键设置方法1、在MySQL中,为了把2个表关联起来,会用到2个重要的功能:外键(FOREIGN KEY)和连接(JOIN)。外键需要在
- 本文实例讲述了mysql中的sql_mode模式。分享给大家供大家参考,具体如下:mysql数据库的中有一个环境变量sql_mode,定义了
- 关于python读取xml文章很多,但大多文章都是贴一个xml文件,然后再贴个处理文件的代码。这样并不利于初学者的学习,希望这篇文章可以更通
- 这篇文章主要介绍了python通过递归获取目录下指定文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 本文记录的要实现的功能类似于 MySQL 中的 ORDER BY,上个项目中有遇到这样的一个需求。 要求:从两个不同的表中获取各自的4条数据
- 前言MySQL在2016年仍然保持强劲的数据库流行度增长趋势。越来越多的客户将自己的应用建立在MySQL数据库之上,甚至是从Oracle迁移
- 一 ,mysql事务MYSQL中只有INNODB类型的数据表才能支持事务处理。启动事务有两种方法(1) 用begin,rollback,co
- 一、日志库选型需要和比较1.日志库选型需求日志性能不同日志级别可读性(包括日志采集、监控等)文件切割(不同维度分割)2.日志库比较记录一条消
- 1、通过url下载即后端提供文件的地址,直接使用浏览器去下载通过window.location.href = 文件路径下载window.lo
- 将图片翻译成文字一般被称为光学文字识别(Optical Character Recognition,OCR)。可以实现OCR 的底层库并不多