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 回答