Crear círculo centrado con número en WordPress

  • Autor Autor WebmasterKing
  • Fecha de inicio Fecha de inicio

WebmasterKing

Kappa
Verificación en dos pasos activada
Verificado por Binance
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:

ALGUIEN DEL FORO ME HECHA UNA MANO?
 
Ahora te ayudo.
 
@WebmasterKing cual es que necesitas, el circulo rojo?
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
 
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
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:
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
 
"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!!
 
"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!!
CSS:
.circulos {
    width: 355px;
    display: flex;
    flex-wrap: wrap;
}
 
Queda pegado de la de arriba:

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

Disculpa es que no se nada de codigo😅
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;
}
 
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...
 
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...
No te preocupes bro, te envió un mp para una consulta.