How to apply line break after an image?

Asked

Viewed 75 times

-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

html css material-ui
  • 2

    Have you ever thought about changing the direction of the grid? Or does it not apply to what you are producing...

  • @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.

1 answer

1


Hello,

With the Material-UI Grid component it is possible to nestle the items in this way.

<Grid container item xs={4}>
  <Grid container item xs={12} alignItems="center" justify="center">
    <img
      alt="Outro Gato"
      style={{ maxWidth: "50px", minWidth: "50px" }}
      src="http:\\suaurldeimagem"
    />
  </Grid>
  <Grid container item xs={12} alignItems="center" justify="center">
    <Button color="primary">Procurar</Button>
  </Grid>
</Grid>

Here the reproduction in codesandbox.io

As the documentation of Grid tells us, remember that the Grid is always based on a 12-column responsive layout, the properties [Xs, Sm, Md, lg, Xl] help to position the items inside the container.

Browser other questions tagged html css material-ui

You are not signed in. Login or sign up in order to post.