es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo alinear las estadísticas del archivo README lado a lado en GitHub.

No sé si este es el lugar correcto para hacer esta pregunta, pero realmente estoy atascado en esta parte. Básicamente, estoy tratando de alinear mis estadísticas de GitHub lado a lado en el archivo readme.

Agregué este código en mi archivo readme:

<img src="https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=radical" alt="User GitHub Stats">
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=radical&layout=compact" alt="Top Languages Card">

¿Cómo puedo hacer que las dos tarjetas se alineen lado a lado? Algo como esto:

[imagen aquí]

¿Algún consejo?

ACTUALIZACIÓN:

Intenté agregar esto pero aún no funcionó:

<img align="center" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical">
<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact">

[imagen aquí]

<div style="display: flex; flex-direction: row;">
 <img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical">
 <img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact">
</div>
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para alinear las dos estadísticas de GitHub lado a lado en el archivo readme, puedes utilizar el diseño de caja flexible (flexbox). Aquí hay un ejemplo de código que puedes intentar agregar a tu archivo readme:

    <div style="display: flex; flex-direction: row;">
        <img class="img" src="https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=radical">
        <img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=radical&layout=compact">
    </div>
    

    Este código crea un contenedor de caja flexible con dirección de fila y coloca las dos tarjetas de estadísticas de GitHub adentro. La clase img se añade a cada elemento de imagen para darle un estilo específico.

    Puedes personalizar los estilos del contenedor y los elementos de imagen según lo necesario para lograr la alineación y el diseño deseados.

Comments are closed.