Я хочу, чтобы все на карте выровнялось на столбце, за исключением прикрепленного изображения, как мне правильно отделить ⇐ CSS

[Anonymous]

Я пытаюсь построить горизонтальную карту, но независимо от того, что я пытаюсь, я не могу выровнять имя, цену и кнопку на столбце, не включив в него изображение. />
Однако в итоге он выглядит как одно из этих двух:
Результат один, используя «Flex-nirection: column»


${evento.tipo}
$ ${evento.precio}
Comprar
`;
}
< /code>
, которые затем стилизованы с помощью CSS: < /p>

Код: Выделить всё

.cartaEvento {
min-width: 40em;
margin: 1em;
padding: 1em;
display:flex;
align-items: center;
flex-direction: column;
gap: 10px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: black;
}
< /code>
Я пробовал несколько вещей, изменив тип дисплея, поиск на любом форуме и пытаясь узнать больше Flexbox, но ничего не работает, я даже пытался дать изображение собственные свойства, и это тоже не работает: < /p>
 < /p>



.cartaEvento {
min-width: 40em;
margin: 1em;
padding: 1em;
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: black;
}< /code>


[img]${evento.imagen}[/img]

${evento.tipo}

$ ${evento.precio}

Comprar

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-attached