7

Tenho um texto que desejo manipular com efeitos, mas preciso que a estrutura do mesmo fique correta. A estrutura que preciso fazer, é com que cada letra fique exatamente no meio de uma div (uma div para cada letra). Tentei usar com span, mas não obtive êxito. A estrutura que preciso é basicamente essa:

html

<div>
    <span>T</span>
</div>
<div>
    <span>E</span>
</div>
<div>
    <span>X</span>
</div>
<div>
    <span>T</span>
</div>
<div>
    <span>O</span>
</div>

Preciso que as divs sejam maiores que as letras, e que não fiquem muitos justinhas, pois vou aplicar um background em cada div. Como posso fazer isso no css?

2 Respostas 2

8

Normalmente, quando não temos a medida exata do span, podemos usar a seguinte técnica:

Primeiro, deixar a div com position:relative, para podermos deixar os span em absolute em relação à esta.

Depois, acertamos o canto superior esquerdo em 50% e 50%, ou seja, começando no meio.

Como queremos o centro do span no centro da div, e não o "bico" do span no meio, compensamos usando um transform(-50%,-50%)

div {
  position:relative;
  width:100px;
  height:100px;
  /* o float e o border é só para visualizar */  
  float:left;
  border:1px solid red
}

div span {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
<div>
    <span>T</span>
</div>
<div>
    <span>E</span>
</div>
<div>
    <span>X</span>
</div>
<div>
    <span>T</span>
</div>
<div>
    <span>O</span>
</div>

Se você definir o tamanho dos spans, pode em vez de depender do transform, usar margens negativas:

div { position:relative; width:100px; height:100px; float:left; border:1px solid red; }

div span {
  position:absolute; display:block;
  top:50%; left:50%; width:20px; height:20px;
  margin:-10px 0 0 -10px; background-color:#f90;
}
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>


Usando animações:

Caso vá animar alguma propriedade, lembre-se de colocar o translate sempre antes, senão o movimento pode ficar fora de centro.

Veja a diferença da ordem dos transforms:

@keyframes rotate1 {
  0%   { transform:translate(-50%,-50%) rotate( 0 ) }
  100% { transform:translate(-50%,-50%) rotate( 360deg ) }
}

@keyframes rotate2 {
  0%   { transform:rotate( 0 ) translate(-50%,-50%) }
  100% { transform:rotate( 360deg ) translate(-50%,-50%) }
}

div { position:relative; width:100px; height:100px; float:left; border:1px solid red;}
div span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

#d1 span { animation:rotate1 2s infinite linear }
#d2 span { animation:rotate2 2s infinite linear }
<div id="d1"><span>Certo</span></div>
<div id="d2"><span>Argh!!!</span></div>

1
  • excelente resposta, além do que eu esperava!
    – DiChrist
    Commented 18/12/2015 às 13:04
3

Você também poderia, ao invés de usar todo o código mencionado á cima, definir sua div como esta abaixo:

div{
    display:flex;
    justify-content:center;
    align-items: center;
    /*Abaixo definições para visualização teste*/
    width:100px;
    height:100px;
    float:left;
    border:1px solid red;
}

Isso irá centralizar qualquer elemento dentro de uma div.

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 .