2

Necesito hacer tres círculos con un texto en el centro del círculo y debajo de cada círculo va a ir un texto que puede ser una palabra, o varias palabras, los círculos deben estar alineados en el centro de la línea, todo funciona OK.

El problema se presenta cuando el texto debajo de los círculos tienen más de una línea, los círculos se alinean hacia abajo, cuando deberían alinearse hacia arriba.

¿Alguna idea que me puede estar faltando o sobrando en el código?

Adjunto imagen con el resultado del código: introducir la descripción de la imagen aquí

Este es el código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .centrar_circulos {
        width: 100%;
        margin: auto;
    }
    .circulo {
        width: 100px;
        height: 100px;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        line-height: 100px;
        text-align:center;
        color: #FFFFFF;
        background-color: #000000;
        font-size: 50px;
    }
    .texto_circulo {
        width: 100px;
        padding-top: 5px;
        line-height: 20px;
        color: #FFFFFF;
        background-color: #000000;
        font-size: 18px;
    }
    nav {
        background-color: grey;
        text-align:center;
    }
    nav ul {
        justify-content: top;
        padding-left: 10px;
        padding-right: 10px;
    }
    nav li {
        display:inline-block;
        padding: 0 10px 25px 10px;
    }
    </style>
</head>

<body>
    <div class="centrar_circulos">
    <nav>
        <ul>
            <li><div class="circulo">1</div><div class="texto_circulo">Ganador</div></li>
            <li><div class="circulo">12</div><div class="texto_circulo">Segundo lugar</div></li>
            <li><div class="circulo">123</div><div class="texto_circulo">El ultimo lugar</div></li>
        </ul>
    </nav>
    </div>
</body>

</html>

1 respuesta 1

2

Puedes probar añadiendo flex a nav ul y cambiarle el justify-content a center. Para que sea responsive añade flex-flow:row wrap o flex-wrap:wrap

En tu codigo quedaria asi:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .circulo {
        width: 100px;
        height: 100px;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        line-height: 100px;
        text-align:center;
        color: #FFFFFF;
        background-color: #000000;
        font-size: 50px;
    }
    .texto_circulo {
        width: 100px;
        padding-top: 5px;
        line-height: 20px;
        color: #FFFFFF;
        background-color: #000000;
        font-size: 18px;
    }
    nav {
        background-color: grey;
        text-align:center;
    }
    nav ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    nav li {
        display:inline-block;
        padding: 0 10px 25px 10px;
    }
    </style>
</head>

<body>
    <div class="centrar_circulos">
    <nav>
        <ul>
            <li><div class="circulo">1</div><div class="texto_circulo">Ganador</div></li>
            <li><div class="circulo">12</div><div class="texto_circulo">Segundo lugar</div></li>
            <li><div class="circulo">123</div><div class="texto_circulo">El ultimo lugar</div></li>
        </ul>
    </nav>
    </div>
</body>

</html>

Espero que te sirva, saludos.

2
  • Si funciona, pero cuando achico la pantalla no se re alinean los círculos. Estas bien cerca de la solución. Necesito que se re alineen ya que debe ser responsive, que se te ocurre?
    – Developer
    Commented el 6 sept. 2019 a las 0:10
  • 1
    con alinear te refieres en columna, no? entonces debes añadir 'flex-flow: row wrap;'
    – neollob
    Commented el 6 sept. 2019 a las 0:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.