GIF Spinner左对齐，如何通过Javascript使其居中对齐

Question

我在HTML中关注DIV：

<div id="progress" class="progress">
    <img src="Content/themes/base/images/progress.gif" />
    <br />
    <span>LOADING... </span>
</div>

CSS类定义是：

.progress
{
text-align: center;
}

在页面加载时，进度微调器加载到屏幕中心但是当我隐藏然后显示此微调器时，它始终保持对齐。

以下是停止微调器的代码：

document.getElementById("progress").style.display = "none";

再次显示它（这里它与屏幕左对齐）：

document.getElementById("progress").style.display = "inline";

我错过了什么？

Answer 1

我解决了。我按如下方式修改了css类：

.progress
{
text-align: center;
display: none;
}

并使用了JQuery show / hide方法：

$(".progress").show();
$(".progress").hide();

完美的工作！

Answer 2

text-align仅适用于块容器（默认情况下为div）。

使用display: block而不是display: inline

…style.display = "block";

Answer 3

最好隐藏和显示微调器，因为你不想改变任何css，因为使该样式在线对齐它，你也可以使用

document.getElementById("progress").style.display="box"; 

它不会应用左对齐。