Question

I need to display some error messages (one, two, n errors) in a series of divs in my page. They need to appear horizontal centered and fixed at top (even with scroll page).
I tried something like this (for two divs for now):

        <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;


}

But this is not centering it horizontally. Any ideas how I can do this?

Answer 1

Instead of using the margin-left and left properties on #erros and #alertas, use: margin-left: auto and margin-right: auto, which will set them to be equidistant from the left and right sides of the page, respectively.

You should be able to change your code to the following:

#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;
}