how to center image in react-multi-carousel?

Question

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>`

what do you need to be centered image or complete carousel ?? — Anonymous Coder, Jul 19 '21 at 15:02
the logos inside the div of carousel. in above case the image inside — kbc, Jul 19 '21 at 16:51
your images are already centered inside the carousel container — Anonymous Coder, Jul 19 '21 at 17:13

score 1 · Answer 1 · answered Jul 19 '21 at 13:10

1

write style inside your tag itself.like this

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

answered Jul 19 '21 at 13:10

Manohar P

44
3

Style works but to display the item in center it doesn't work – kbc Jul 19 '21 at 14:13

score 1 · Answer 2 · edited Sep 29 '22 at 20:34

1

I'm a little bit late but hope this could help someone (it worked for me):

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

edited Sep 29 '22 at 20:34

Adrian Mole

49,934
160
51
83

answered Sep 22 '22 at 21:12

Fabrício Ishida

11
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 27 '22 at 13:57

how to center image in react-multi-carousel?

2 Answers2