
Abel Areiza
PreguntaMe gustaría saber la mejor forma para alinear el título de la tabla y los elementos de la izquierda como en el diseño de Figma.
Lo que tengo:
Lo que está en el diseño en Figma:
Gracias de antemano
-
En los title se agrega un text-align: left con algo de padding.
-
para .currency-table--container, tambien text-align: left y
-
en .currency-table__container td se le agrega padding para que no quede totalmente a la izquierda.

Eduardo David Alfredo Unrrein
Hola, espero que te encuentre bien... Yo, para alinear a todos los elementos de la izquierda a la misma distancia use lo siguiente:
.currency-table--container td:nth-child(1){ text-indent: 16px; }
Lo cual genera una sagría de 16px
Alex Gordillo

Johan Alejandro Cristancho Medina
como no hemos usado display flex ni nada por el estilo... lo realicé haciendo una reducción al tamaño de main-currency-table a 300px (máximo anchor de las tablas según breakpoints) y con esto se acota el título y la tabla, luego se le pone el margin-left... eso se ha de reestablecer en los siguientes breakpoints ya que al ampliarse el titulo-texto no identan y no se cumplirían los requisitos...

MIguel Oviedo
Solo debes quitarle el centrado al texto

John Cardenas
La formas más sencilla de hacerlo es con
text-align: left
Le aplicas ese estilo tanto a
.currency-table--container td
.currency-table--title

Abel Areiza
Hola, John! Gracias por responder, lo tengo tal cual como le llevamos en el curso hasta lección, te adjunto la parte de CSS correspondiente a esta zona del main:
main { width: 100%; height: auto; 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 .background-image { width: 200px; height: 200px; margin: 0 auto; margin-bottom: 50px; background-image: url('./assets/images/bitcoin.svg'); 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('./assets/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('./assets/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; } .currency-table--date p { font-size: 1.2rem; font-weight: 400; line-height: 1.5rem; color: var(--warm-black); }
Muchas gracias de antemano

John Cardenas
¡Hola, Abel!
Sube tu código CSS para saber que display y/u otras propiedades estas usando y así poder ayudarte :D