Crear círculo centrado con número en WordPress

  • Autor Autor WebmasterKing
  • Fecha de inicio Fecha de inicio
WebmasterKing

WebmasterKing

Kappa
Verificación en dos pasos activada
Verificado por Binance
¡Usuario popular!
Hola amigos!!

Tengo este codigo:

HTML:
<div class="circulo">
<h2>22 </h2>
</div>


CSS:
.circulo {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: red;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin:0px auto;
padding:3%
}

.circulo > h2 {
font-family: sans-serif;
color: white;
font-size: 1.4rem;
font-weight: bold;
}

Y quiero hacerlo igual que esta imagen:
hacer.webp

ALGUIEN DEL FORO ME HECHA UNA MANO?
 
Ahora te ayudo.
 
YeltsinReyes dijo:
@WebmasterKing cual es que necesitas, el circulo rojo?
Hacer clic para expandir...
Hola! muchas gracias de ante manos compañero. Lo necesito asi como enla imagen uno al lado del otro. no es encesario que los colores sean exacto puedes poner blanco y negro y yo lo edito para que sea mas facil y rapido para ti
 
WebmasterKing dijo:
Hola! muchas gracias de ante manos compañero. Lo necesito asi como enla imagen uno al lado del otro. no es encesario que los colores sean exacto puedes poner blanco y negro y yo lo edito para que sea mas facil y rapido para ti
Hacer clic para expandir...
Ok bro.
 
@WebmasterKing ahi me dices que tal.
HTML: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circulo</title>
</head>
<body>
  
<style>

.circulos {
    width: 500px;
    display: flex;
}

.circulo {
    width: 60px;
    height: 60px;
    color: #010101;
    border-radius: 50%;
    background-color: #e6e6e6;
    border: 3px solid #737373;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

.circulo:nth-child(6){
    color: #ffffff;
    background-color: #6f70ff;
    border: 3px solid #0100fe;
}

.circulo:nth-child(7){
    color: #ffffff;
    background-color: #ff6162;
    border: 3px solid #e00024;
    margin-right: 0px;
}

.circulo > h2 {
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 0px;
}
</style>


<div class="circulos">
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
</div>

</body>
</html>
 
Última edición:
Ya lo veo
 
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .lista {
            display: flex;
        }

        .circulo {
            background: rgb(123, 123, 123);
            padding: 5px;
            border: 1px solid #000;
            border-radius: 50%;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-direction: row;
            margin: 0 .2em;
        }

        .circulo:nth-child(5) {
            background: red;
            padding: 5px;
            border: 1px solid #000;
            border-radius: 50%;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-direction: row;
            margin: 0 .2em;
        }
    </style>
</head>

<body>
    <div class="lista">
        <span class="circulo">1</span>
        <span class="circulo">2</span>
        <span class="circulo">3</span>
        <span class="circulo">4</span>
        <span class="circulo">5</span>
    </div>
</body>

</html>

Por si sirve de algo :v
 
YeltsinReyes dijo:
@WebmasterKing ahi me dices que tal.
HTML: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circulo</title>
</head>
<body>
 
<style>

.circulos {
    width: 500px;
    display: flex;
}

.circulo {
    width: 60px;
    height: 60px;
    color: #010101;
    border-radius: 50%;
    background-color: #e6e6e6;
    border: 3px solid #737373;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

.circulo:nth-child(6){
    color: #ffffff;
    background-color: #6f70ff;
    border: 3px solid #0100fe;
}

.circulo:nth-child(7){
    color: #ffffff;
    background-color: #ff6162;
    border: 3px solid #e00024;
    margin-right: 0px;
}

.circulo > h2 {
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 0px;
}
</style>


<div class="circulos">
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
</div>

</body>
</html>
Hacer clic para expandir...
"Mejor de ahi se daña" Tal cual y como lo queria amigo!! Tengo una ultima duda como podria pasar los circulos rojo y azul a la linea de abajo? ya que queda muy largo en la culunna que lo estoy poniendo @byzarz
byzarz dijo:
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .lista {
            display: flex;
        }

        .circulo {
            background: rgb(123, 123, 123);
            padding: 5px;
            border: 1px solid #000;
            border-radius: 50%;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-direction: row;
            margin: 0 .2em;
        }

        .circulo:nth-child(5) {
            background: red;
            padding: 5px;
            border: 1px solid #000;
            border-radius: 50%;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-direction: row;
            margin: 0 .2em;
        }
    </style>
</head>

<body>
    <div class="lista">
        <span class="circulo">1</span>
        <span class="circulo">2</span>
        <span class="circulo">3</span>
        <span class="circulo">4</span>
        <span class="circulo">5</span>
    </div>
</body>

</html>

Por si sirve de algo :v
Hacer clic para expandir...
Si esta correcto!!
 
WebmasterKing dijo:
"Mejor de ahi se daña" Tal cual y como lo queria amigo!! Tengo una ultima duda como podria pasar los circulos rojo y azul a la linea de abajo? ya que queda muy largo en la culunna que lo estoy poniendo @byzarz

Si esta correcto!!
Hacer clic para expandir...
CSS: 
.circulos {
    width: 355px;
    display: flex;
    flex-wrap: wrap;
}
 
Queda pegado de la de arriba:
Screenshot_346.webp


Disculpa es que no se nada de codigo😅
 
WebmasterKing dijo:
Queda pegado de la de arriba: Ver el archivo adjunto 635238

Disculpa es que no se nada de codigo😅
Hacer clic para expandir...
Aqui solo agregue el margin-bottom: 5px;

CSS: 
.circulo {
    width: 60px;
    height: 60px;
    color: #010101;
    border-radius: 50%;
    background-color: #e6e6e6;
    border: 3px solid #737373;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
 
YeltsinReyes dijo:
Aqui solo agregue el margin-bottom: 5px;

CSS: 
.circulo {
    width: 60px;
    height: 60px;
    color: #010101;
    border-radius: 50%;
    background-color: #e6e6e6;
    border: 3px solid #737373;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
Hacer clic para expandir...
Listo, muchas gracias por tu tiempo hermano. Intente calificarte pero el enlace debe ser del area de negocio, si quieres dejame tu paypal para ahcerte una pequeña donacion por la ayuda, quedo a al espera...
 
WebmasterKing dijo:
Listo, muchas gracias por tu tiempo hermano. Intente calificarte pero el enlace debe ser del area de negocio, si quieres dejame tu paypal para ahcerte una pequeña donacion por la ayuda, quedo a al espera...
Hacer clic para expandir...
No te preocupes bro, te envió un mp para una consulta.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

WebmasterKing
¿Cómo hacer esta linea Horizontal?
Respuestas
6
Visitas
348
WebmasterKing
WebmasterKing
WebmasterKing
Cómo cambiar el nombre de la clase .circulos en CSS y HTML
2
Respuestas
28
Visitas
1K
Alan1555
Alan1555
J
Tutorial: Tutorial para crear un theme de Wordpress desde cero
2 3
Respuestas
47
Visitas
6K
viana2211
viana2211
__Cc__
  • Cerrado
Cómo cambiar color de títulos en entradas de WordPress
Respuestas
5
Visitas
656
__Cc__
__Cc__
C
Problema de centrado en CSS con Internet Explorer
Respuestas
2
Visitas
1K
ChronoMX
C
Atrás
Arriba