Gostaria de saber como fazer um circulo com um texto no centro em asp.net, segue imagem do resultado esperado.
2 Respostas
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>
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>