2

Gostaria de saber como fazer um circulo com um texto no centro em asp.net, segue imagem do resultado esperado.inserir a descrição da imagem aqui

2 Respostas 2

2

Experimenta o código abaixo, se não estiver usando razor coloca no seu formato:

 .bloco{
        background-color: #4fb7ad;
        font-size: 10px;
        color: white;
        padding: 10px;
        border-radius: 50%;
        text-align: center;
   display: inline;
   
    }
    <div class="bloco">
    M
    </div>

2

Se quer colocar somente uma letra dentro do círculo, pode fazer assim:

p {
  border-radius: 50%;
  background: #4CB5AB;
  color: #fff;
  display: inline;
  padding: 5px 10px
}
<p>M</p>


No caso de ser uma palavra ou frase, uma forma de se fazer é com flexbox definindo as propriedades align-items e justify-content:

.circulo {    
    border-radius: 50%;
    display: -webkit-flex;
            display: flex;
    -webkit-align-items: center;
            align-items: center;
    justify-content: center;

    background: #4CB5AB;
    color: #fff;
    width: 300px;
    height: 300px;
}
<div class='circulo'>StackOverflow</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 .