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>
3 respuestas
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>
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!!
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>
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].