2

Veja como está

inserir a descrição da imagem aqui

Preciso colocar o texto na parte debaixo do círculo usando css.. tenho o código aqui 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;
    }
4
  • Oque? Explioque melhor isso, como está suas divs? o texto de dentro ou o de fora do circulo?
    – Bsalvo
    Commented 19/07/2017 às 16:37
  • o texto de fora.. a palavra 'Teste' deve ficar alinhado com a parte debaixo do círculo.
    – Ricardo CF
    Commented 19/07/2017 às 16:37
  • Esse link é editado simultaneamente por todos.....
    – Bsalvo
    Commented 19/07/2017 às 16:41
  • Pois é, Scratchpad.io mostra a edição de todos. A resposta está correta.. deu certo.. já vou marcar como melhor resposta!
    – Ricardo CF
    Commented 19/07/2017 às 16:45

2 Respostas 2

2

Basta adicionar a propriedade line-height na classe .text e diminuir a margin-left da classe .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

Não tem necessidade de criar elementos extras (um elemento <span>, por exemplo) para isto, pode utilizar o pseudo elemento ::before para estilizar o círculo:

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>

Relacionada:

1
  • Renan a resposta é excelente e corretíssima, mas acredito que foge do escopo da pergunta. Se existisse um js por exemplo que manipulasse as tags <span> no código do usuário que fez a pergunta, essa resposta mataria a manipulação. (não acredito que seja o caso aqui), por isso sempre tento manter a mesma estrutura nas respostas.
    – Bsalvo
    Commented 19/07/2017 às 17:13

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 .