圖片在瀏覽器視窗水平居中的實例程式碼分享
閒言碎語不多說，直接上程式碼，看看你能領悟到多少。
<!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>
以上是圖片在瀏覽器視窗水平居中的實例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
WebSocket服務器返回401後瀏覽器無反應的原因是什麼？如何解決？
Apr 19, 2025 pm 02:21 PM
WebSocket服務器返回401後瀏覽器無反應的處理方法在使用Netty開發WebSocket服務器時，經常會遇到驗證token的需求。 �...
為什麼JavaScript無法直接獲取用戶電腦的硬件信息？
Apr 19, 2025 pm 08:15 PM
關於JavaScript無法獲取用戶電腦硬件信息的原因探討在日常編程中，許多開發者會好奇為什麼JavaScript無法直接獲�...
JWT能否實現動態權限變更？與Session機制有何區別？
Apr 19, 2025 pm 06:12 PM
關於JWT和Session的困惑與解答許多初學者在學習JWT和Session時，常常會對其本質和適用場景感到困惑。本文將圍繞J...
USDT轉賬地址錯誤怎麼辦 新手小白指南
Apr 21, 2025 pm 12:12 PM
USDT轉賬地址錯誤後，首先確認轉賬已發生，然後根據錯誤類型採取措施。 1.確認轉賬：查看交易記錄，獲取並在區塊鏈瀏覽器上查詢交易哈希值。 2.採取措施：若地址不存在，等待資金退回或聯繫客服；若為無效地址，聯繫客服並尋求專業幫助；若轉給了他人，嘗試聯繫收款方或尋求法律幫助。
Java如何正確生成並顯示微信小程序帶參數二維碼？
Apr 19, 2025 pm 04:48 PM
在Java中生成帶參數的微信小程序二維碼並將其顯示在HTML頁面上，是一個常見的需求。本文將詳細探討如何使用J...
歐易交易所如何註冊賬戶 歐易交易所註冊教程
Apr 24, 2025 pm 02:06 PM
註冊歐易賬戶的步驟如下：1.準備有效郵箱或手機號和穩定網絡。 2.訪問歐易官網。 3.進入註冊頁面。 4.選擇郵箱或手機號註冊，填寫信息。 5.獲取並填寫驗證碼。 6.同意用戶協議。 7.完成註冊並登錄，進行KYC和設置安全措施。
兩個交易所之間可以互相轉幣嗎 交易所之間可以轉幣嗎
Apr 22, 2025 am 08:57 AM
可以。兩個交易所之間可以互相轉幣，只要支持相同的幣種和網絡。步驟包括：1. 獲取收款地址，2. 發起提幣請求，3. 等待確認。注意事項：1. 選擇正確的轉賬網絡，2. 仔細核對地址，3. 了解手續費，4. 注意到賬時間，5. 確認交易所支持該幣種，6. 注意最小提幣數量。
什麼是鏈上交易？全球鏈上交易所有哪些？
Apr 22, 2025 am 10:06 AM
歐盟MiCA合規認證，覆蓋50 法幣通道，冷存儲比例95%，零安全事件記錄。美國SEC持牌平台，法幣直購便捷，冷存儲比例98%，機構級流動性，支持大額OTC和自定義訂單，多級清算保護。
