Question

我需要在页面中的一系列div中显示一些错误消息（一，二，n个错误）。它们需要以水平为中心并固定在顶部（即使使用滚动页面）。我试过这样的事情（现在有两个div）：

        <div id="mensagens">
            <div id="erros" style="display: none;">                    
                <span></span>                
            </div>
            <div id="alertas" style="display: none;">                    
                <span></span>                
            </div>
        </div>

的CSS：

#mensagens
{
    position:absolute; 
    position: fixed; 
    top: 0px; 
    z-index:9999;    
}

#alertas 
{    
    width: 700px;
    margin-left: 350px;
    left: 50%;

    font-size: 100%;
    font-weight: bold;    
    background:orange;
    padding:6px;

}


#erros 
{    

    width: 700px;
    margin-left: 350px;
    left: 50%;

    font-size: 100%;
    font-weight: bold;    
    background:red;
    padding:6px;


}

但这不是水平居中的。我有什么想法可以做到这一点吗？

Answer 1

不使用margin-left和left上的#erros和#alertas属性，而是使用margin-left: auto和margin-right: auto来设置它们分别与页面的左侧和右侧等距。

您应该可以将代码更改为以下内容：

#mensagens
{
    position:absolute; 
    position: fixed; 
    top: 0px; 
    z-index:9999;    
}    

#alertas 
{    
    width: 700px;
    margin-left: auto;
    margin-right: auto;

    font-size: 100%;
    font-weight: bold;    
    background:orange;
    padding:6px;
}


#erros 
{    
    width: 700px;
    margin-left: auto;
    margin-right: auto;

    font-size: 100%;
    font-weight: bold;    
    background:red;
    padding:6px;
}

显示div中的错误，一个低于另一个

1 个答案: