Trouble centering CRP Shortcode

I figured out a work around. I added a limit=”3″ instead of 2 and adjusted the thumbnail size to it utilized the most space so it appears center.

I would be curious on how to actually make it center if I decided to make it a limit=”2″ thank you

Given that you have cleanly set out the width and have it at 2, you could try this in the plugins Styles > Custom styles box or your theme’s CSS. This one is forcing the width of the div to the width of the images and then setting the margin to be auto i.e. centered.

.crp_related.crp-rounded-thumbs {
  width: 732px;
  margin: 0 auto;
}

Thank you.

@pizzaboy913 I’ve been looking for ways to make it centered many times, including in your thread. After I updated the new version I faced this issue as well. Today, I decided to ask ChatGPT again and this time it is working!

/* Ensure the entire CRP container is centered */
.crp_related.crp-rounded-thumbs {
  display: flex;
  justify-content: center; /* Centers the content horizontally */
  flex-wrap: wrap; /* Allows items to wrap to the next line if necessary */
  text-align: center;
}

/* Ensure the UL is centered and spans the available width */
.crp_related.crp-rounded-thumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Center the UL items horizontally */
  flex-wrap: wrap; /* Allows for wrapping if items exceed the width */
}

/* Style the LI items to be centered and in a row */
.crp_related.crp-rounded-thumbs li {
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

/* Ensure the A elements and content inside are centered */
.crp_related.crp-rounded-thumbs a {
  display: block;
  text-align: center;
}

/* Style the images to be centered */
.crp_related.crp-rounded-thumbs img.crp_thumb {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Center figure elements */
.crp_related.crp-rounded-thumbs figure {
  margin: 0;
  text-align: center;
}