裝載機元素始終處於居中位置

我有一個非常簡單的裝載機這樣一個裝載機元素始終處於居中位置

<i class="icon-refresh icon-spin"></i> //font awesome

我用它所有的Ajax請求。 ajax請求的響應插入到.html()到由請求本身定義的不同dom元素中，它可以通過最小div作爲整個頁面。

我的問題是，我想定位加載器總是在目標元素，中間寬度和中間高度的中間位置。

任何想法？

來源

2013-03-22 ghego1

不，不是用你發佈的一小段代碼。 – j08691 2013-03-22 15:49:42

容器必須是'position：relative'和spinner'position：absolute'，然後你將它的'left'屬性設置爲50％ - （微調器寬度）/ 2並且它的'top'屬性爲50％ - （微調器高度）/2 – 2013-03-22 15:51:06

這更是一個CSS問題：

.containerForAjaxContent { position: relative; } 
.icon-refresh.icon-spin { position:absolute; top:50%; left:50%; }

關於絕對定位的說明：

所以，讓我們總結一下在一組簡單的步驟，以找到包含塊一個元素的位置：絕對，這是你所需要的：做：

看看絕對定位元素的父元素 - 做該元素的位置屬性具有相對值，絕對值或固定值之一？

如果是這樣，你已經找到了包含塊。

如果不是，移動到父母的父元素，然後從步驟1 重複，直到你找到包含塊或用完的祖先。

如果您已經到達html元素而沒有找到定位的祖先，那麼包含塊是html元素。

來源：「任何想法」 http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Containing_blocks

來源

2013-03-22 15:52:04 superUntitled

位置爲absolute的元素將相對於最接近的祖先進行定位，其位置設置爲'relative'，'fixed'或'absolute'，請參閱我上面的編輯 – superUntitled 2013-03-22 16:57:09

非常感謝！ – ghego1 2013-03-25 19:37:25

裝載機元素始終處於居中位置

回答

相關問題