Text alignment with css

2

I'm building a div with a loading, the problem is that I can not align the text below the image and in the center.

The image is aligned as I want, in the center of the page.

Can anyone help me?

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
    width:160px;
    height:15px;
    position:absolute;
    top:70%;
    left:48%;
    margin-top:-70px;
    margin-left:-48px;
}
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>
    
asked by anonymous 25.08.2016 / 13:19

1 answer

4

You can only manipulate the property bottom in p , and forget the margins , are not necessary, you also do not have to specify a width in this case, unless you want to force the line break: / p>

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
    text-align: center;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: -80px;
    left: 0;
    right: 0;
    margin: auto;
}
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>
    
25.08.2016 / 13:24