# Center justify star rating in review widget

**URL:** https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621
**Category:** General Questions
**Tags:** all-in-one-reviews
**Created:** [January 24, 2025, 10:50am UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621 "2025-01-24T10:50:15Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [January 24, 2025, 10:50am UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/1 "2025-01-24T10:50:15Z")

</div>

I’m using ‘All-in-one reviews’ widget. I can center justify the review text, but not the star rating.

---

<div class="post-metadata">

### Author: ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [January 24, 2025, 11:21am UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/2 "2025-01-24T11:21:56Z")

</div>

Hi @Mark_Day1

try this.

```auto
.es-rating-container {
  justify-content: center;
}

```

---

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [January 24, 2025, 12:01pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/4 "2025-01-24T12:01:31Z")

</div>

Thanks, that was quick! Yes, that worked (though actually after trying it I realised that left justify looked better …)

---

<div class="post-metadata">

### Author: ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)
#### Post date: [January 24, 2025, 12:04pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/5 "2025-01-24T12:04:26Z")

</div>

Hi there, @Mark_Day1 👋

Glad to hear that the provided code worked for you! If any further assistance is needed, we are always here to help 😉

@Sina, a huge thank you for your quick help!

---

<div class="post-metadata">

### Author: ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [January 24, 2025, 12:21pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/6 "2025-01-24T12:21:26Z")

</div>

> [@Mark\_Day1](#):
>
> Thanks, that was quick! Yes, that worked (though actually after trying it I realised that left justify looked better …)

That’s fine and I’m happy 🙃  
Can you mark this as solution 👏

![grafik](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/7/27938c39f3f88f01f2817307e2561600d924231b.png)

---

<div class="post-metadata">

### Author: ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [January 24, 2025, 12:27pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/7 "2025-01-24T12:27:05Z")

</div>

@Mark_Day1  
You can also try it to see if you like it better. 🙃

```auto
.es-review-content-text-container {
  text-align: center;
}

.es-review-author-block-container,
.es-rating-container {
  justify-content: center;
}

```

---

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [January 24, 2025, 2:40pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/8 "2025-01-24T14:40:49Z")

</div>

Aha, that’s the one! Great work! Yes, I am using your latest code, many thanks @Sina

---

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [March 25, 2025, 6:59pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/9 "2025-03-25T18:59:22Z")

</div>

Hello again, maybe @Sina can help with this related issue …

I came to look at my review plugin today and it was clear that the formatting still isn’t right. So I went into the Elfsight/ my apps/ all-in-one reviews page and noticed that there is an unwanted left margin being applied. However, I don’t know what css class to target to get rid of it. I’m hoping that with the screenshot here, you will be able to tell me what custom css I need to add … many thanks.

 ![Picture1](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/2/d2d60901f4f94f9fdb98b2a6927527c04b80a638.png)

---

<div class="post-metadata">

### Author: ![Sina](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/sina/32/59970_2.png) [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [March 25, 2025, 7:20pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/10 "2025-03-25T19:20:36Z")

</div>

Hi @Mark_Day1

I can’t access your widgets, and unfortunately, I can’t see anything in the screenshot.  
Can you share your widget and post the link here or send it to me in a private message?  
Otherwise, @Max will take a look at it, too.

---

<div class="post-metadata">

### Author: ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)
#### Post date: [March 26, 2025, 10:51am UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/11 "2025-03-26T10:51:09Z")

</div>

Hi @Mark_Day1 👋

I’ve checked your widget and don’t see this left margin now:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/2/82ea520e45aebb46f47dcecd8354ad02b68dfd5c.png)

  

Could you please confirm if everything is fine on your end?

---

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [April 2, 2025, 1:11pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/12 "2025-04-02T13:11:18Z")

</div>

Thank you both @Sina and @Max and apologies for the delayed response - I didn’t have notifications turned on. Max has found the public page where the widget sits - [Expert UK Immigration Advice | White Rose Visas](https://www.whiterosevisas.co.uk/#reviews). Do you need the private [dash.elfsight.com](http://dash.elfsight.com) URL as well?

To answer Max’s question, the fact is that at some widths there is no left margin, but at other widths the unwanted left margin is still there. Just try resizing the page horizontally, and you will see that unwanted left margin appear. That’s why I posted the initial screenshot, as I picked one of the ‘bad’ widths where the unwanted margin appeared.

I’m also attaching the screenshot again here, since you both said that previously you weren’t able to see it.  
Thanks for your help!

 ![Picture1](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/2/d2d60901f4f94f9fdb98b2a6927527c04b80a638.png)

---

<div class="post-metadata">

### Author: ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)
#### Post date: [April 2, 2025, 3:29pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/13 "2025-04-02T15:29:55Z")

</div>

Got it, thanks!

This code should fix the issue:

```auto
.es-review-align-container {
  margin-left: 0 !important;
}

```

Please add it to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped 🙂

---

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [April 3, 2025, 5:26pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/14 "2025-04-03T17:26:12Z")

</div>

Thanks Max, but sadly, that rule was already in my css. My custom css is currently below. It is a weird one. All looks completely fine on the [dash.elfsight.com](http://dash.elfsight.com) editor, but on my live site [whiterosevisas.co.uk](http://whiterosevisas.co.uk) the annoying left margin is still present.

.es-review-content-text {  
font-size: 0.9rem;  
color: #4f4e4e;  
}

.es-review-content-text-container {  
text-align: center;  
}

.es-review-author-block-container,  
.es-rating-container {  
justify-content: center;  
}

.es-review-align-container {  
margin-left: 0 !important;  
}

---

<div class="post-metadata">

### Author: ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)
#### Post date: [April 3, 2025, 6:00pm UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/15 "2025-04-03T18:00:40Z")

</div>

The thing is that you haven’t published changes in your widget.

I’ve published and everything worked great. Could you please double-check it?

---

<div class="post-metadata">

### Author: ![Mark\_Day1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_day1/32/52116_2.png) [@Mark\_Day1](https://community.elfsight.com/u/Mark_Day1)
#### Post date: [April 4, 2025, 9:03am UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/16 "2025-04-04T09:03:06Z")

</div>

Whoops, sorry for that oversight Max. Yes, I have checked now and all looks fine. Thank you for your help.

---

<div class="post-metadata">

### Author: ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)
#### Post date: [April 4, 2025, 9:04am UTC](https://community.elfsight.com/t/center-justify-star-rating-in-review-widget/96621/17 "2025-04-04T09:04:45Z")

</div>

No problem!

In the meantime, I’d like to remind you about our Giveaway, where you can win **3 FREE** months for your subscription.

Check the details and join in 😉 - [April Giveaway: Celebrate 80K Members with Us & Win 3 FREE Months! 😍](https://community.elfsight.com/t/april-giveaway-celebrate-80k-members-with-us-win-3-free-months/109962)
