Web Front-end
JS Tutorial
Example code sharing for horizontally centering images in the browser window
Example code sharing for horizontally centering images in the browser window
Without further ado, just jump into the code and see how much you can understand.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片在浏览器窗口水平居中展示（图片尺寸不限制）</title>
<style>
* {
margin: 0;
padding: 0;
background: #606060}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
#img-center {
width: 800px;
margin: 0 auto;
display: block;
margin-top: 2%;
margin-bottom: 2%;
cursor: zoom-in;
}</style>
<script>window.onload = function() {/*小于浏览器屏幕时居中 */var docuH = document.body.clientHeight,
domH = document.getElementById("img-center").offsetHeight,
dom = document.getElementById("img-center");if(domH < docuH) {var csstext = "position:absolute;top:50%;margin-left:-400px;left:50%;margin-top:-" + domH / 2 + "px;";
dom.style.cssText = csstext;
}
};/*滚动定位*/function bbimg(o) {var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;if(zoom > 0) o.style.zoom = zoom + '%';return false;
}</script>
</head>
<body>
<img src="img/3.jpg" alt="" id="img-center" onmousewheel="return bbimg(this)">
</body>
</html>
The above is the detailed content of Example code sharing for horizontally centering images in the browser window. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page?
Apr 05, 2025 pm 10:33 PM
Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...
How to control the top and end of pages in browser printing settings through JavaScript or CSS?
Apr 05, 2025 pm 10:39 PM
How to use JavaScript or CSS to control the top and end of the page in the browser's printing settings. In the browser's printing settings, there is an option to control whether the display is...
Why does negative margins not take effect in some cases? How to solve this problem?
Apr 05, 2025 pm 10:18 PM
Why do negative margins not take effect in some cases? During programming, negative margins in CSS (negative...
How to use locally installed font files on web pages?
Apr 05, 2025 pm 10:57 PM
How to use locally installed font files on web pages Have you encountered this situation in web page development: you have installed a font on your computer...
The text under Flex layout is omitted but the container is opened? How to solve it?
Apr 05, 2025 pm 11:00 PM
The problem of container opening due to excessive omission of text under Flex layout and solutions are used...
How to achieve horizontal scrolling effect of horizontal options by rotating elements in CSS?
Apr 05, 2025 pm 10:51 PM
How to achieve horizontal scrolling effect of horizontal options in CSS? In modern web design, how to achieve a horizontal tab-like effect and support the mouse...
There are gaps in three divs in the Vant Popup component: What CSS style is causing it?
Apr 05, 2025 pm 11:12 PM
Vante...
How to solve the height problem by adjusting the rem unit in adaptive design?
Apr 05, 2025 pm 11:03 PM
How to solve the height adjustment problem in adaptive design? In adaptive design, height adjustment is often a difficult problem. Especially when dealing with similar...
