# How to center chips with CSS?

**URL:** <https://community.glideapps.com/t/how-to-center-chips-with-css/53321>\
**Category:** Ask for Help\
**Created:** [November 4, 2022, 3:21pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321 "2022-11-04T15:21:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 4, 2022, 3:21pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/1 "2022-11-04T15:21:19Z")

</div>

I’ve tried to center some chips in a choice component and give them the same width with CSS to look like this:

 ![Screenshot 2022-11-04 at 11.40.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a9539d3d309948d950e47ba983dce6f10467d91a.png)

I’m quite new to CSS, so I was super chuffed when I got this to happen on my own screen with the following code:

```auto
<pre><span><style>

.hyLuov {
margin: auto !important;
}

.epQbSL .size-item {
width: 50px;
text-align: center !important;
}

```

[However I discovered that this does not stay like this when I publish my app, because I’m not targeting classes or ID’s but just names.](https://community.glideapps.com/t/css-from-screen-to-phone/53301)  
I’ve been trying to figure out how to target the correct elements for the past hours and my head is about explode.

Can anyone help?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 5, 2022, 1:34am UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/2 "2022-11-05T01:34:10Z")

</div>

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=502cfbc7cc3b44f4b769e692eca6793d&pm=c)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

Check this guide to see if it helps. If I recall right the choice component does not have a stable class name.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 5, 2022, 7:50pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/3 "2022-11-05T19:50:11Z")

</div>

```
div[id\*='screenScrollView'] \> div \> :nth-child(1) { margin:auto !important; }
```

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 7, 2022, 5:49pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/4 "2022-11-07T17:49:42Z")

</div>

seems I can only find some for changing a segmented choice component

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 7, 2022, 5:50pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/5 "2022-11-07T17:50:29Z")

</div>

This works. 😀  
Is there a way to target the width of the chips?  
I tried to add some white space around the emojis, but didn’t make the chips wider.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 7, 2022, 8:01pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/6 "2022-11-07T20:01:40Z")

</div>

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(2) {
margin:auto !important;
transform: scale(1.5) !important;
}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 7, 2022, 11:18pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/7 "2022-11-07T23:18:46Z")

</div>

Not sure what you mean, the link basically contains the same code as Uzo stated above.

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 8, 2022, 6:41am UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/8 "2022-11-08T06:41:25Z")

</div>

Ahh sorry, didn’t look in the actual link - I thought you meant to look through some of the projects to see if any of them where styling a choice component.  
But yes, you’re right - I just couldn’t see the woods for trees.

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 8, 2022, 6:52am UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/9 "2022-11-08T06:52:30Z")

</div>

When using transform and scale it make the chips both taller and wider. I can see how this would work for a text. But what I’m trying to do is the below:

 ![Screenshot 2022-11-07 at 13.24.45](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/d/7deb1e0f5416a0d29adf411fa2b71b80a85b6d53.jpeg)

Currently it looks like this:

 ![Screenshot 2022-11-08 at 06.50.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1a9fe6209743f5dfb30eab18bac4831178f543be.jpeg)

And using the transform it looks like this:

 ![Screenshot 2022-11-08 at 06.51.08](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/27b7b132f211ac30a1fe6c1bfd11bb3445950ec1.jpeg)

Thank you again for taking you time to help me with this.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 8, 2022, 3:25pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/10 "2022-11-08T15:25:27Z")

</div>

inspect the element and change the target class

```auto
.nEAaW {
    display: inline-block;
    position: relative;
    margin: 0px 4px 4px 0px;
    padding: 8px 46px !important;
    color: rgb(17, 17, 17);
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    border-radius: 100px;
    overflow: hidden;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.1875rem;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

```

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 9, 2022, 2:21pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/11 "2022-11-09T14:21:47Z")

</div>

I’m trying to figure out how I can get this to work.  
But I don’t seem to understand how I can target the right class.

I tried something like this

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(5) {
margin:auto !important;
}

[data-test="sc-hxqtlr epQbSL current"] >div {
width: 100px !important;
}

```

and I tried this

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(5) {
margin:auto !important;
}

[data-test="sc-hxqtlr.epQbSL.current"] >div {
width: 100px !important;
}

```

But it doesn’t work.  
I’m not sure I’m understanding how to target the right class.  
Below is the names I think is the class names - is that correct?  
or am I misunderstanding everything?

 ![Screenshot 2022-11-09 at 12.53.53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a84f485a4adcd0a0048a9acca4b8d4864b4816ff.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 9, 2022, 3:43pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/12 "2022-11-09T15:43:43Z")

</div>

find and replace class… I give you the whole code, so is easier for you to find it… then just paste that:

.nEAaW {  
padding: 8px 46px !important;  
}

replace `.nEAaW`

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 11, 2022, 10:26pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/13 "2022-11-11T22:26:41Z")

</div>

I’m a little unsure how I can replace the class

I did this:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(5) {
margin:auto !important;
}

</style></span></pre>

<div class="nEAaW"></div>

<pre><span><style>
.nEAaW {
padding: 8px 46px !important;
}
</style></span></pre>

```

But it doesn’t really do much

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 11, 2022, 10:29pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/14 "2022-11-11T22:29:52Z")

</div>

I told you to find and replace .nEAaW  
use inspect tool. Each app has a unique class for that.  
also, no need for creating a div for it

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 11, 2022, 10:34pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/15 "2022-11-11T22:34:18Z")

</div>

but I think my problem is I don’t know exactly how to replace with css…?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 11, 2022, 10:38pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/16 "2022-11-11T22:38:07Z")

</div>

inspect that element, and find the class… I can’t help you… unless you share the link to your app, then I can look for you

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 11, 2022, 10:52pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/17 "2022-11-11T22:52:28Z")

</div>

I’ll send you a DM with the link - I really appreciate

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 12, 2022, 1:43am UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/18 "2022-11-12T01:43:31Z")

</div>

Please try replacing :nth-child(n) with :nth-of-type(n)

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 12, 2022, 1:51pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/19 "2022-11-12T13:51:12Z")

</div>

> [@KPT](#):
>
> `padding: 8px 46px !important;`

Still the same.  
@Uzo helped me to replace the class, which did the trick - however it didn’t convert to the phone. So I kind of given up and have to design another solution.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 12, 2022, 2:40pm UTC](https://community.glideapps.com/t/how-to-center-chips-with-css/53321/20 "2022-11-12T14:40:26Z")

</div>

Try to copy this code and replace the sequence number according to your component number.

```auto
div[id*='screenScrollView'] > div > :nth-of-type(n) {
margin: auto;
}
div[id*='screenScrollView'] > div > :nth-of-type(n) div:nth-of-type(1) >div {
padding: 5px 5px !important;
}

```

[Next page](https://community.glideapps.com/t/how-to-center-chips-with-css/53321.md?page=2)