Place text at the bottom of the css circle

Asked

Viewed 1,683 times

2

Look at you

inserir a descrição da imagem aqui

I need to place the text at the bottom of the circle using css.. I have the code here http://scratchpad.io/unequal-mist-4130

.circle{
    height: 37px;
        line-height: 37px;
        position: absolute;
        background: white;
        border-radius: 52px;
        width: 37px;
        height: 37px;
        text-align: center;
        font-size: 10px;
        border: 2px solid black;
        vertical-align: bottom;
    }
css css3

  • What? Explioque that better, how are your Ivs? the text inside or outside the circle?

  • the text outside.. the word 'Test' should be aligned with the part below the circle.

  • This link is edited simultaneously by everyone.....

  • That’s right, Scratchpad.io shows the edition of all. The answer is correct.. it worked.. I’ll mark it as the best answer.!

2 answers

2


Just add the property line-height in class .text and decrease the margin-left class .circle 

 <style>
        .circle{
          	    height: 37px;
        		    line-height: 37px;
        		    position: absolute;
        		    background: white;
        		    border-radius: 52px;
        		    width: 37px;
        		    height: 37px;
        		    text-align: center;
        		    font-size: 10px;
        		    border: 2px solid black;
                margin-left: -35px;   
        		}
        .texto{
            line-height: 100px;
        
        }
        </style>
        
        <div class="texto">Teste<span class="circle">1</span></div>

2

No need to create extra elements (an element <span>, for example) for this, you can use the pseudo element ::before to stylize the circle:

div::before {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  content: attr(data-number);
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px
}

/* somente para mostrar os itens em "lado a lado". */
div {
  display: inline-block
}
<div data-number='1'>teste</div>
<div data-number='2'>teste</div>
<div data-number='3'>teste</div>

Related:

  • Renan the answer is excellent and very correct, but I believe that escapes the scope of the question. If there was a js for example that manipulated the <span> tags in the user’s code that asked the question, that answer would kill the manipulation. (I don’t think that’s the case here) so I always try to maintain the same structure in the answers.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.