相容所有瀏覽器長寬自適應元素垂直水平居中
固定寬度的子元素垂直水平居中效果是非常的容易實現的,這裡不多介紹了,具體可以參閱css實現div水平垂直居中程式碼一章節,如果不是固定的那就有點麻煩,當然在標準瀏覽器中是沒問題, 但是如果要相容所有瀏覽器就比較麻煩了,下面介紹一下使用js實現此功能的程式碼。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ height:300px; width:300px; border:1px solid; position:relative; } #inner{ background-color:red; } </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box"); var inner=document.getElementById("inner"); var w=inner.offsetWidth; var h=inner.offsetHeight; inner.style.position="absolute"; inner.style.left="50%"; inner.style.top="50%"; inner.style.marginLeft="-"+parseInt(w/2)+"px"; inner.style.marginTop="-"+parseInt(h/2)+"px"; } </script> </head> <body> <div id="box"> <span id="inner">內容自適應水平垂直居中</span> </div> </body> </html>
以上程式碼實現了我們的要求,內碼表比較簡單,這裡就不細說了,可以參閱相關閱讀。
相關閱讀:
1.offsetWidth屬性可以參閱offsetWidth一章節。
2.parseInt()函式可以參閱javascript parseInt()一章節。
相關文章
- 元素自適應水平垂直居中
- 不定寬高元素的水平垂直居中
- 位置寬高元素垂直水平居中效果
- 不定寬度下,元素的垂直居中,水平居中
- css不定寬高元素垂直水平居中效果CSS
- 元素垂直水平居中
- css設定元素在瀏覽器中垂直水平居中程式碼例項CSS瀏覽器
- css實現瀏覽器垂直水平居中效果程式碼CSS瀏覽器
- 元素水平居中,垂直居中方法
- 【轉】超寬的banner條自適應瀏覽器大小始終居中的方法瀏覽器
- js實現未知寬高的元素在指定元素中垂直水平居中JS
- 淺談居中問題(水平居中、垂直居中、水平垂直居中)
- 未知寬高圖片在元素中垂直水平居中程式碼例項
- css面試題實現元素垂直水平居中-包括未知寬高的元素五種回答CSS面試題
- 最新Iframe全瀏覽器相容自適應高度解決方案瀏覽器
- forEach()相容所有瀏覽器瀏覽器
- 相容所有瀏覽器js設定元素透明度效果瀏覽器JS
- 如何實現span元素垂直水平居中效果
- css絕對定位元素垂直水平居中CSS
- 元素水平垂直居中【彈性佈局 || Translate】
- CSS實現相容所有瀏覽器具有最小高度且自適應的divCSS瀏覽器
- css水平元素寬度自適應均勻排列程式碼例項CSS
- CSS元素(文字、圖片)水平垂直居中方法CSS
- 直播系統app原始碼,元素水平垂直居中APP原始碼
- 元素水平垂直居中三種方法實現
- CSS垂直居中和水平居中CSS
- CSS水平居中和垂直居中CSS
- css水平垂直居中CSS
- CSS垂直水平居中CSS
- 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中…….幫你搞定
- CSS控制所有瀏覽器水平居中和控制連結不換行的效果CSS瀏覽器
- 兩列居中寬度自適應佈局
- 相容所有瀏覽器的placeholder效果瀏覽器
- 相容所有瀏覽器的getElementsByClassName()函式瀏覽器函式
- 相容所有瀏覽器array物件indexOf()方法瀏覽器物件Index
- 【CSS】水平垂直居中的4種實現(寬高不定)CSS
- 安居客面試題:純css實現未知比例圖片自適應且水平垂直居中面試題CSS
- CSS相容各瀏覽器最小高度且能夠自適應程式碼CSS瀏覽器