I'm currently facing an issue with my website design. Here's a snapshot of how it looks:
https://i.sstatic.net/UuBJJ.png
Additionally, here is the code snippet related to the problem:
<CardActions>
<Typography
style={{
fontWeight: 'bold',
color: 'red',
}}
>
{product.price}đ ///// the price number /////
</Typography>
</CardActions>
The problem I am facing is that I want to center the price tag within the card similar to the sold button below. Initially, I tried wrapping it in a <Box> element and using textAlign, but this did not work.
Although this seems like a simple issue to resolve, I believe I might be missing something important. Despite trying various approaches to fix it, nothing has worked so far. Any assistance on this matter would be highly appreciated.