Hola, pude hacer el reto pero no logro que quede centrado la tabla de monedas con la de comisiones, no se como hacer para que me queden c...

Santiago Ruberto

Santiago Ruberto

Pregunta
studenthace 3 años

Hola, pude hacer el reto pero no logro que quede centrado la tabla de monedas con la de comisiones, no se como hacer para que me queden centradas ambas y una al lado de la otra

Borrar.JPG

<code> main { width: 100%; min-width: 320px; height: auto; display: flex; flex-direction: column; background-color: var(--off-white); } .main-exchange-container { width: 100%; height: auto; padding-top: 80px; padding-bottom: 30px; text-align: center; } .main-exchange-container--title { width: 90%; min-width: 288px; max-width: 900px; margin: 0 auto; } .main-exchange-container .backgroundImg { width: 200px; height: 200px; margin: 0 auto; margin-bottom: 50px; background-image: url("./Logos/Bitcoin.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .main-exchange-container h2 { margin-bottom: 30px; font-size: 2.4rem; font-weight: bold; line-height: 2.6rem; color: var(--black); } .main-exchange-container p { margin-bottom: 30px; font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; color: #757575; } .main-currency-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family:'Inter', sans-serif; } .main-currency-table .currency-table--title { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 2.3rem; color: var(--bitcoin-orange); } .currency-table--container { width: 90%; min-width: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .currency-table--container table { width: 100%; height: 100%; } .currency-table--container td { width: 50%; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; color: var(--grey); background-color: var(--just-white); } .currency-table--container .table__top-left { border-radius: 15px 0 0 0; } .currency-table--container.table__top-right { border-radius: 0 15px 0 0; } .currency-table--container .table__bottom-left { border-radius: 0 0 0 15px; } .currency-table--container .table__bottom-right { border-radius: 0 0 15px 0; } .currency-table--container .table__right { font-size: 1.4rem; font-weight: normal; line-height: 1.7rem; color: #757575; } .currency-table--container .down { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-image: url("./icons/trending-down.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--container .Up { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-image: url("./icons/trending-up.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; background-color: var(--soft-orange); border-radius: 8px; width: max-content; } .currency-table--date p { font-size: 1.2rem; font-weight: 500; line-height: 1.5rem; color: var(--warm-black); } /*Comisiones */ .main2-currency-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family:'Inter', sans-serif; } .main2-currency-table .currency2-table--title { margin-top: 15px; margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 2.3rem; color: var(--secondary-blue); } .currency2-table--container { width: 90%; min-width: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .currency2-table--container table { width: 100%; height: 100%; } .currency2-table--container td { width: 50%; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; color: var(--grey); background-color: var(--just-white); } .currency2-table--container .table__top-left { border-radius: 15px 0 0 0; } .currency2-table--container.table__top-right { border-radius: 0 15px 0 0; } .currency2-table--container .table__bottom-left { border-radius: 0 0 0 15px; } .currency2-table--container .table__bottom-right { border-radius: 0 0 15px 0; } .currency2-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; background-color: var(--soft-blue); border-radius: 8px; width: max-content; } .currency2-table--date p { font-size: 1.2rem; font-weight: 500; line-height: 1.5rem; color: var(--warm-black); }
No hay respuestas
para escribir tu comentario
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.

Curso de Responsive Design: Maquetación Mobile First
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.