how to center image in react-multi-carousel?

Viewed 1457

I'm new to react, trying to build brand carousel using react-multi-carousel. The images are displayed properly but I want to center the image. Tried to write css it did not apply on the carousel. How this can be achieved, Or do I have to use any other carousel? `

<Grid item xs={12}>
 <Carousel
   responsive={responsive}
   infinite={true}
   arrows={true}>
       <Image src={abt.logo_carousel.url}responsive/>
       <Image src={abt.logo_carousel1.url}responsive/>
       <Image src={abt.logo_carousel2.url}responsive/>
       <Image src={abt.logo_carousel3.url}responsive/>
 </Carousel>
</Grid>`
2 Answers

write style inside your tag itself.like this

<img src="..." style={{width:300,marginLeft:"auto",marginRight:"auto"}} />

i'm a little bit late, but hope this could help someone, it worked here.

<img src={source} style={{marginLeft: "auto", marginRight: "auto", display: "flex", justifyContent: "center"}}/>
Related