-1
I own a img
and a Button
, both are within one Grid
library React-ui material.
My goal is to center horizontal and vertical both the image and the button in the available space xs={4}
, however, I need a line break after the image.
What I tried to:
<Grid container justify="center" alignItems="center" item xs={4}>
<img style={{maxWidth: '50px', minWidth: '50px'}} src={imageSource} />
<br />
<Button
color="primary"
>
Procurar
</Button>
</Grid>
But after the image, there is no line breaking.
I also tried to:
<br clear="all" />
I made a reproduction on codesandbox in case anyone is interested in trying to help me
Have you ever thought about changing the direction of the grid? Or does it not apply to what you are producing...
– Daniel Mendes
@Danielmendes I really opted for another alternative, with display block and text-align, maybe not the best solution, but met the expected. I’ll add an answer soon.
– veroneseComS