js實現未知寬高的元素在指定元素中垂直水平居中
本章節介紹一下如何實現未知寬高的元素在指定元素下實現垂直水平居中效果,下面就以span元素為例子,介紹一下如何實現span元素在div中實現水平垂直居中效果,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:150px; background:blue; position:relative; } #antzone{ background:green; } </style> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var oantzone=document.getElementById("antzone"); var w=oantzone.offsetWidth; var h=oantzone.offsetHeight; oantzone.style.position="absolute"; oantzone.style.left="50%"; oantzone.style.top="50%"; oantzone.style.marginLeft=-(w/2)+"px"; oantzone.style.marginTop=-(h/2)+"px"; } </script> </head> <body> <div id="box"> <spanj id="antzone">螞蟻部落</span> </div> </body> </html>
上面你的程式碼實現了span元素在div中垂直水平居中效果,下面簡單介紹一下它的實現過程。
一.實現原理:
雖然css為明確給出span元素的尺寸,但是它畢竟有一個尺寸的,這個尺寸可以使用offsetWidth和offsetHeight屬性獲取,然後將此span元素設定為絕對定位,然後再將left和top屬性值分別設定為50%,但是這個時候並不是span元素的中心點垂直水平居中,而是span元素的左上角垂直水平居中,然後在設定span元素的負的外邊距,尺寸是span元素寬高的一半,這樣就實現了垂直水平居中效果。
二.相關閱讀:
1.offsetWidth可以參閱offsetWidth一章節。
相關文章
- css面試題實現元素垂直水平居中-包括未知寬高的元素五種回答CSS面試題
- 未知寬高圖片在元素中垂直水平居中程式碼例項
- 不定寬高元素的水平垂直居中
- 不定寬度下,元素的垂直居中,水平居中
- css如何實現未知寬高div中圖片垂直水平居中效果CSS
- 位置寬高元素垂直水平居中效果
- CSS子元素居中(父元素寬高已知,子元素未知)CSS
- 元素垂直水平居中
- css不定寬高元素垂直水平居中效果CSS
- 如何實現span元素垂直水平居中效果
- CSS 實現元素在當前視窗水平垂直居中CSS
- 元素水平居中,垂直居中方法
- 元素水平垂直居中三種方法實現
- 【CSS】水平垂直居中的4種實現(寬高不定)CSS
- 元素自適應水平垂直居中
- 如何實現婚戀app原始碼中元素水平垂直居中?APP原始碼
- 相容所有瀏覽器長寬自適應元素垂直水平居中瀏覽器
- css絕對定位元素垂直水平居中CSS
- 元素水平垂直居中【彈性佈局 || Translate】
- css3實現元素垂直水平居中程式碼例項CSSS3
- 元素水平居中
- css3實現div元素垂直水平居中程式碼例項CSSS3
- CSS元素(文字、圖片)水平垂直居中方法CSS
- 直播系統app原始碼,元素水平垂直居中APP原始碼
- css3實現元素垂直居中效果CSSS3
- CSS 文字li元素中垂直居中CSS
- (高階)居中沒有寬度的元素
- css如何實現文字在li元素中上下垂直居中CSS
- css設定元素在瀏覽器中垂直水平居中程式碼例項CSS瀏覽器
- jQuery實現的div在視窗中垂直水平居中效果jQuery
- 水平垂直居中的實現方法
- 如何實現水平垂直居中?
- div垂直居中-CSS元素垂直居中方法CSS
- 元素水平垂直居中(僅做自我總結,侵權刪)
- 浮動元素水平居中
- 16種方法實現水平居中垂直居中
- css 水平垂直居中實現方式CSS
- css文字在元素中垂直居中程式碼例項CSS