How to center the image element inside the wrapping div

the way i would like to style my elements

The ScreenShots of the jsx and css code and that of the web page is given below.

image_jsx_css

webpage

>Solution :

Try giving the parent div a display flex and using the justify-content and align-items properties like this

.movie_image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 2px solid black;
}

.image {
  height: 100%;
}

Leave a Reply