I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead?
<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;
}