2

Galera estou montando uma div com um loading, o problema e que não consigo alinhar o texto abaixo da imagem e no centro.

A imagem esta alinhada como eu quero, no centro da página.

Alguém pode me ajudar?

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

1 Resposta 1

4

Pode mexer só na propriedade bottom no p, e esqueça as margins, não são necessárias, também não tem de especificar uma width neste caso, a não ser queira forçar a quebra de linha:

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

2
  • vlw. eu tava quebrando a cabeça aqui hahahahah, 25/08/2016 às 11:33
  • :) hehe sem necessidade. Ainda bem que resolveu @HugoBorges
    – Miguel
    25/08/2016 às 11:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .