Make circle with text in center asp.net

Question

Make circle with text in center asp.net

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I would like to know how to make a circle with a text in the center in asp.net, follow the image of the expected result.

asp.net css

asked by anonymous 31.07.2015 / 19:45

2 answers

Problems in content on demand (infinite scroll) Popular input with data from the same table via dropdown

score 2 · Answer 1

Try the following code, if you are not using razor puts it in your format:

 .bloco{
        background-color: #4fb7ad;
        font-size: 10px;
        color: white;
        padding: 10px;
        border-radius: 50%;
        text-align: center;
   display: inline;
   
    }

    <div class="bloco">
    M
    </div>

score 2 · Answer 2

If you want to put only one letter inside the circle, you can do this:

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

<p>M</p>

In case of being a word or phrase, one way to do it is with flexbox defining the properties align-items and 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>