3

Como eu faço para o texto de dentro do circulo ficar alinhado no centro vertical também?

CSS

.circle{
   position: absolute;
    background: red;
    border-radius: 52px;
    width: 37px;
    right: 308px;
    height: 37px;
    top: 90px;
    text-align: center;
    font-size: 10px;
    color: #FFF;
}

HTML

<div class='circle'>3</div>

Visualizar no jsfiddle

2 Respostas 2

3

Se seu texto só tem uma única linha, você pode fazer com que o line-height seja igual ao tamanho da div:

.circle{
    ...
    height: 37px;
    line-height: 37px;
    ...
}

Exemplo. Caso contrário, essa resposta no SOen mostra mais opções. Eu pessoalmente só usei na prática o line-height - inteiro pra uma linha de texto, a metade pra duas linhas, etc, sempre sendo previsível o número de linhas. De modo que não sei avaliar as soluções pra um número arbitrário de linhas.

1
2

Uma alternativa é trabalhar com flexbox. E por um motivo simples: Você não precisa se preocupar com a questão do posicionamento vertical e horizontal, a propriedade faz todo o trabalho com base nas regras definidas.

Um exemplo:

.size-x {
    height: 100px;
    width:100px;
}

.circle {
    background: #333;
    color: #fff;
    border-radius: 50%;
    font-size: 2em;
    
    display: -webkit-flex;
     display: -ms-flexbox;
            display: flex;

    -webkit-align-items: center;
      -webkit-box-align: center;
	 -ms-flex-align: center;
	    align-items: center;
    
  justify-content: center;
}
<div class='size-x circle'>1</div>

A princípio pode parecer muito código para uma coisa tão simples, acontece que trata-se ainda de uma propriedade "experimental", então é preciso utilizar alguns prefixos.

Mas para mostrar a questão do "não se preocupar com o alinhamento (...) o flexbox cuida disso" eis alguns exemplos aumentando somente o width e height da mesma classe utilizada no exemplo acima:

.circle {
    background: #333;
    color: #fff;
    border-radius: 50%;
    font-size: 2em;
    
    display: -webkit-flex;
     display: -ms-flexbox;
            display: flex;

    -webkit-align-items: center;
      -webkit-box-align: center;
	     -ms-flex-align: center;
	        align-items: center;
    
  justify-content: center;
}

.size-u {
    background: #1abc9c;
    height: 50px;
    width: 50px;
}

.size-v {
    background: #3498db;
    height: 100px;
    width: 100px;
}

.size-w {
    background: #9b59b6;
    height: 150px;
    width: 150px;
}

.size-x {
    background: #e74c3c;
    height: 200px;
    width: 200px;
}

.size-y {
    background: #f1c40f;
    height: 300px;
    width: 300px;
}

.size-z {
    background: #34495e;
    height: 500px;
    width: 500px;
}
<div class='size-u circle'>1</div>
<div class='size-v circle'>2</div>
<div class='size-w circle'>3</div>
<div class='size-x circle'>4</div>
<div class='size-y circle'>5</div>
<div class='size-z circle'>6</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 .