Why this list of DIV is not centered using react bootstrap?-CodePudding

I am trying to build an image gallery using react-boostrap. When I resize the page the number of images per row scale as expected, but they are still floating left. How can I center them?

<div >
  <div >
    <div >
      <div gallery>...</div>
      <div gallery>...</div>
      <div gallery">
                <div className="gallery-image-container">
                    <Link href={`/picture/${encodeURIComponent(element._id)}`}>
                        <Image fluid className="gallery-image" src={element.imgUrl} />
                    </Link>
                </div>
                <div className="gallery-info-container">
                    <p>{element.title}</p>
                    <p>{element.author}</p>
                </div>
            </div>
        );
    });

    return (
        <div className="gallery-container">
            {pictures}
        </div>
    )
}

export default Gallery;

css:

.gallery {
  padding: .5rem;
  margin: .5rem;
  border: .1rem solid #ccc;
  float: none;
  display: inline-block;

  &:hover {
    border: .1rem solid #777;
  }

  &-image {
    max-width: 100%;
    max-height: 100%;

    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    object-fit: contain;
  }

  &-image-container {
    width: 12rem;
    height: 12rem;
    position: relative;
    border: 1px solid blue;
  }

  &-info-container {
    //border: 1px solid green;
    margin-top: .2rem;
  }

}

CodePudding user response：

Just wanted to point it out: In your example code you are not using react-bootstrap library, you directly use bootstrap classes. react-bootstrap is a collection of components rewritten in React (no jQuery dependency). Just because you have a React project and you are using bootstrap classes, it doesn't automatically mean you use "react-bootstrap".

To your problem: You are wrapping your "row" with an extra div. Put this class right next to row and remove it - then you have a proper row with 5 elements. Center it with "justify-content-center" if it's what you need:

<div >
      <div >
        <div >...</div>
        <div >...</div>
        <div >...</div>
        <div >...</div>
        <div >...</div>
      </div>
    </div>

https://codesandbox.io/s/kind-voice-bhskhx