装载机元素始终处于居中位置

我有一个非常简单的装载机这样一个装载机元素始终处于居中位置

<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

装载机元素始终处于居中位置

回答

相关问题