2

Tenho uma dúvida que está me consumindo muito tempo, seguinte:

Preciso centralizar o contador da imagem abaixo, porém ele precisa ficar no rodapé da tela (com position:absolute) e a div dele tem tamanho variável.

inserir a descrição da imagem aqui

Se a minha div tivesse um tamanho fixo, poderia usar tranquilamente margin:0 auto;

Porém alem de ser variável, está com position:absolute; e com bottom:0;, segue código completo:

#clock{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
}

Vejam como tá ficando:

inserir a descrição da imagem aqui

Alguma sugestão?

3
  • Oi Fernando, o que significa tamanho variável?
    – Cold
    Commented 4/04/2015 às 17:49
  • Precisa mesmo ser div? De vez em quando vale a pena apelar pra uma table (ou "display:table") pra esse tipo de coisa.
    – hugomg
    Commented 4/04/2015 às 17:52
  • Variável é porque ela não tem uma largura definida, vai depender dos números e da resolução da tela. Commented 4/04/2015 às 18:09

4 Respostas 4

2

Não indicaste a tua markup para obteres uma solução perfeitamente adequada ao teu caso, mas fica uma solução sem recorrer a declarações de CSS que possam por em causa a apresentação da página devido ao uso de navegadores mais antigos:

  1. O elemento que serve de wrapper vai ser posicionado no fundo da página, com uma largura de 100% da tela.

  2. Os elementos do relógio vão ficar inline-block para que possamos alinhar os mesmos ao centro sem perder a possibilidade de os formatar como pretendido.

Exemplo também no JSFiddle.

ul {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
li {
  font-size: 2em;
  display: inline-block;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10px;
  color: skyblue;
}

/* para a demonstração */
html, body { margin:0; padding:0; font-size: 14px; background-color: black; width:100%; }
ul { margin:0; padding:0; }
li > small { font-size: 0.6em; }
<ul>
  <li>129<br/><small>dias</small></li>
  <li>09<br/><small>horas</small></li>
  <li>39<br/><small>minutos</small></li>
  <li>11<br/><small>segundos</small></li>
</ul>

1
  • 1
    Perfeito @Zull Analisando sua resposta, pude perceber que estava faltando o width:100% no elemento pai (tag header) e no wrapper. Adicionalmente tive que colocar um left:0; na ul, não entendi muito bem o motivo, pois usando sua implementação ele jogou para a direita, mas agora funcionou perfeitamente, inclusive em resoluções menores. Muito obrigado! Commented 5/04/2015 às 20:40
0

Variável como? Responsivo? Você está ou deveria estar usando um "container" no conteúdo todo para centralizar as informações. Caso esteja usando o container e o site seja responsivo, defina um valor de width para esse container respeitando os breakpoints que vc deseja usando media queries. Agora, se você quiser que fique centralizado o conteudo de dentro tendo 3 ou menos boxes, sugiro você utilizar um pouco de javascript/jquery divindo 100% pelo numero de elementos e aplicando o resultado como o novo width de cada box. Ou caso você não se preocupe com IE8 pra baixo, pode dar uma lida sobre flex-box CSS3.

1
  • Exato, por causa do responsivo. Queria evitar um pouco javascript, mas talvez seja uma opção também. Experimentei o flex-box mas no meu caso ele aumentava o tamanho dos box também, então acabei desistindo dele. Commented 4/04/2015 às 17:59
0

Veja se isso resolve:

#clock{
 position: absolute;
 bottom: 0;
 margin: 0 auto;

 display: inline;
 text-align: center;
 overflow: visible;
}
4
  • Infelizmente não funcionou, acredito muito por causa do position absolute. Commented 4/04/2015 às 18:08
  • se a largura fosse fixa daria para centralizar.
    – Carlos
    Commented 4/04/2015 às 18:09
  • Sim, se você observar o logo, ele está com largura fixa, então centralizei sem problemas, a dificuldade nesse caso é justamente essa, não posso definir uma largura fixa :( Commented 4/04/2015 às 18:11
  • Da para fazer o seguinte: #clock{left: 50%; margin-left: -Xpx} Sendo X a largura média do elemento dividida por 2. Não ia ficar perfeito, mas em conjunto com a solução do natan ia quebrar um galho nos navegadores antigos.
    – Carlos
    Commented 4/04/2015 às 18:21
-1

Você pode user o transform: translate(-50%, -50%); left: 50%; position: absolute; quando não possui o tamanho do elemento.

Neste link tem várias formas de fazer a centralização: http://www.maujor.com/tutorial/centralizando-com-css-um-guia-completo.php

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 .