How to express centering in javascript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to express centering in javascript

藏色散人

Jun 30, 2021 am 09:46 AM

javascript

The implementation method of JavaScript centering: first get the browser window; then get the div element of main; then calculate the position through the width and height of the window and the width and height of div; finally get the div element of mcontent.

How to express centering in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

Specific question:

How to indicate that JavaScript is centered?

js centers the div content

var button=document.createElement("input");
button.setAttribute("type","button");
button.setAttribute("id","button1");

To center the button inside the div, use js instead of html

Implementation method:

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>

Extended information

Div top and bottom centering code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<title>Div上下居中－www.51windows.Net</title> 
<head> 
<meta name="keywords" content="51windows.Net"> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
</head> 
<body> 
<div style="position: absolute; top: 200; left: 0; width: 300; height: 200;border: 1 solid #C0C0C0;"> 
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了
center</div> 
</div> 
<div style="border: 1 solid #C0C0C0;">
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了
center</div> 
</div> 
</body> 
</html>

[Related recommendations: javascript advanced tutorial]

The above is the detailed content of How to express centering in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn