未知大小的img或div如何水平垂直居中顯示?

2021-08-07 17:11:21 字數 920 閱讀 1833

第一種情況:div中有乙個img標籤,大小未知?

方法一:主要利用絕對定位和相對定位實現。

父div相對定位。子標籤img絕對定位,並且設定top:0;bottom:0;left:0;right:0;和margin:auto,缺一不可。具體**如下:

html如下:

<divclass=

"box">

<imgsrc=

""alt=

"">

div>

css如下:

.box

.box

> img

方法二:主要是利用display:table-cell。

給父級div同時設定3個屬性即可,display:table-cell;text-align:center;vertical-align:middle;

html如下:

<divclass=

"box">

<imgsrc=

""alt=

"">

div>

css如下:

.box

第二種情況:未知大小的div在body中水平垂直居中顯示?

主要使用絕對定位和 display:table-cell 和 margin:auto; 屬性。具體做法:給要居中顯示的div新增下面的css即可:

JS如何獲取乙個未知DIV高度的方法

這種做法的侷限 1.如果元素的display屬性設定為none,那麼得到的結果為0 2.在safari瀏覽器中,需要使用 element.offsetheight得到實際高度,這是safari瀏覽器的bug 下面是prototype提供的方法,能夠相容各種瀏覽器,同時在元素隱藏的情況下也能正確得到元...

如何讓div的大小佔滿整個螢幕?

一 先來 二 原因在這裡 1 如果要以百分比設定元素 div 的尺寸,必要以父元素的尺寸作為參考,如果父元素沒有設定尺寸,那麼子元素 div 尺寸自然不會生效。2 所以如果設定div的高度為100 那麼他的參考元素就是是body,那麼如何設定body的尺寸呢?3 在怪異模式下,body可以作為根元素...

C 如何使用fsteam一次讀完未知大小的檔案

近期在寫乙個socket程式,在過程中遇到乙個問題 如何將乙個未知大小的檔案按照8k位元組的記憶體全部讀完。使用這種方法可以實現讀出檔案大小 ifstream infile 111.bmp ifstream binary 定義乙個ifstream的輸入 infile 檔案流物件 infile.see...