1

这有效并正确对齐图标:

#stepSuccess {
    display: table;
    margin: auto;
}
#stepFailure {
    display: table;
    margin: auto;
}

以下是图标本身:

<i class='icon-ok icon-4x icon-green'id='stepSuccess'></i>
<i class='icon-remove icon-4x icon-red'id='stepFailure'></i>

但是,我需要它在 display: none 用于 javascript 目的。当我尝试使用下面的代码时,在我使用 .show() 显示图标后它不会与中心对齐。

#stepSuccess {
    display: none;
    margin: 0 auto;
}
#stepFailure {
    display: none;
    margin: 0 auto;
}

这是 jQuery

if(checked)
            {
                //display correct-answer dialogue
                $("#stepSuccess").show();
            {
else
            {
                //display wrong-answer dialogue
                $("#stepFailure").show();
            }

如何保持 display: none 并且仍然使代码正确对齐 div 的中心(在 .show() 之后在javascript中)?我也试过 text-align: center;

任何帮助,将不胜感激。

4

2 回答 2

3

我怀疑当你使用时.show(),它会设置display: inline而不是display: table. 而不是.show(),我会设置两个类,一个用于显示,一个用于隐藏,然后切换该类。

或者,您也可以使用:

if(checked)
            {
                //display correct-answer dialogue
                $("#stepSuccess").css('display','table');

            {
else
            {
                //display wrong-answer dialogue
                $("#stepFailure").css('display','table');
            }

而不是.show().

于 2013-09-17T21:30:48.940 回答
0

为了减少代码,您可以将不透明度设置为 0,而不是隐藏吗?

于 2013-09-17T21:54:43.617 回答