Cómo hacer circular el color de fondo en un texto span

Question

Tengo un texto extendido 1 con color de fondo rojo. Quiero hacer que el color de fondo sea redondo, que incluirá el texto extendido 1. Pero lo que tengo en este momento no es hacer el truco.

¿Cómo puedo hacer esto?

.text-span{
  background:red;
  border-radius:20px;
}

<span class="text-span">1</span><span>info</span>

html css

0

LearnLaravel 17 ene. 2018 a las 13:07

Answer 1

Primero, debe mostrarlo en bloque en línea. Esto le permite manipular su tamaño.

Luego, debes darle la misma altura, el mismo ancho para que quede cuadrado.

Después de eso, harás un radio de borde del 50% para que se vuelva redondo.

Finalmente, puede centrarlo dándole la altura de la línea de la altura, y centrar alineando el texto.

Y voilá !

.text-span{
    background:red;
    border-radius:50%;
    height: 26px;
    width: 26px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}

<span class="text-span">1</span><span>info</span>

3

user4676340user4676340 17 ene. 2018 a las 10:11

Answer 2

Pruebe esto :

.text-span{
    background:red;
    border-radius:50%;
    display:inline-block;
    width:20px;
    height:20px;
    text-align:center;
}

<span class="text-span">1</span><span>info</span>

¡¡Espero eso ayude!!

2

sanatsathyan 17 ene. 2018 a las 10:10

Answer 3

No puede centrar absolutamente el contenido dentro del círculo utilizando solo el relleno. Te sugiero este fragmento para centrar cualquier cosa dentro de él con un fragmento simple.

Esta solución tiene solo una nota, debe establecer el tamaño del círculo lo suficientemente grande o recortar el contenido con la propiedad text-overflow.

.text-span {
  display: inline-block;
  background: rebeccapurple;
  border-radius: 50%;
  position: relative;
  width: 30px;
  height: 30px;
  font-family: sans-serif;
  margin-right: 8px;
  vertical-align: middle;
}

.text-span::before {
  content: attr(data-content);
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}

<div>
  <span class="text-span" data-content="1"></span>
  info
</div>


<div>
  <span class="text-span" data-content="99"></span>
  info
</div>

1

Mattia Astorino 17 ene. 2018 a las 10:20

Cómo hacer circular el color de fondo en un texto span

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html