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

Question

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 class="container-fluid">
  <div class="row">
    <div class="page-content-centered">
      <div class="gallery>...</div>
      <div class="gallery>...</div>
      <div class="gallery>...</div>
      <div class="gallery>...</div>
      <div class="gallery>...</div>


.page-content-centered {
    padding: 1rem;
    text-align: center;
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

Answer 1

I figured out a solution, this is the actual code, hopefully someone else will find it useful. The html generated by the react component is like in the question above. I had to change the class names a little bit.

const Gallery = (props) => {
    const pictures = props.pictures.pictures.map(function(element, index) {
        return (
            <div key={index} className="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;
  }

}

Answer 2

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 class="container-fluid">
      <div class="row page-content-centered justify-content-center">
        <div class="gallery">...</div>
        <div class="gallery">...</div>
        <div class="gallery">...</div>
        <div class="gallery">...</div>
        <div class="gallery">...</div>
      </div>
    </div>

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