0

我目前正在研究 HTML/CSS/Javascript。我有一个名为 message 的 div id 和一个显示消息的 javascript 函数，经过这么多秒后调用另一个函数来隐藏它。

这一切都非常有效，除了第一次调用 showMessage 函数时，消息 div 稍微向右推（非常明显不在屏幕中心），然后在 5 秒后 hideMessage 运行并隐藏 div 消息。

如果我再次调用 showMessage 函数，则 div 将正确居中在屏幕中间。

id 消息的 css 只是 got display: none;。

下面是 showMessage 函数在显示 div 之前添加的 messageError 类的 css。

.messageError
{
    position: absolute;
    top: -48px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ff3d3d;
    border: #c10000 solid thin;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

下面是javascript使用的代码

function showMessage(persistent, message, type)
{
    $('#message').css({
        position:'absolute',
        padding: '10px',
        left: ($(window).width() - $('#message').outerWidth())/2
    });

    $("#message")
        .hide()
        .html(message);

    if (type == "error")
    {
        $("#message").addClass("messageError");
    }
    else if (type == "workingComplete")
    {
        $("#message").addClass("messageWorkingComplete");
    }

    $("#message").fadeIn("slow");
    if (!persistent)
    {
        setTimeout("hideMessage()", 5000);
    }
}

function hideMessage()
{
    $("#message")
        .fadeOut("slow");
         removeClass("messageError")
        .removeClass("messageWorkingComplete")
}

我怎样才能使 div 第一次位于中间而无需关闭并重新加载以使其出现在中间。

感谢您的任何帮助，您可以提供。

4

1 回答 1

0

通常，我不喜欢使用：

    width:auto;

如果您试图将 div 居中。分配一个宽度，

    margin:0 auto;

可以做到这一点。还注意到您分配的课程未在您的问题上发布 css。这也可能是问题所在。如果您使用 chrome，一旦您查看结果，请右键单击它，然后使用“检查”元素。这将打开检查器并向您显示所有可以引导您找到问题所在的 css（以及其他非常有用的东西）。问候路易斯

于 2012-10-06T01:05:22.157 回答