# Custom CSS - centre a choice component **URL:** \ **Category:** Ask for Help\ **Created:** [January 20, 2024, 2:26pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782 "2024-01-20T14:26:06Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [January 20, 2024, 2:26pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/1 "2024-01-20T14:26:06Z")
Hi, I would like to centre a choice component (chips) inside a container. Can someone suggest some CSS that would do this? ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f14b991b890ff57440eeecefaa83c261aac1dfbc.png) Thanks ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [January 20, 2024, 2:32pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/2 "2024-01-20T14:32:15Z")
Before jumping into CSS I would try adding a 3 column container and put the choice component in the middle column. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [January 20, 2024, 2:47pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/3 "2024-01-20T14:47:37Z")
I’ve tried that but it doens’t look very good unfortunately ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a6795182e3fc077b5dead2b029e6d65b733852a4.png) I actually really like the styling of an action row inside a container, is there a way to use the same styling? ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d8a1bcbd145c2a7d087ee57f615e24e5c145c6b7.png) ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 20, 2024, 2:53pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/4 "2024-01-20T14:53:24Z")
Couldn’t you just use the Action Row and have each button set the same column value that the choice component would? I do something similar, but I’m my case I open an overlay when an action row button is clicked. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [January 20, 2024, 3:55pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/5 "2024-01-20T15:55:52Z")
Yes that is what I had previsouly but I wanted to be able to turn the tabs on an off depending on which user had selected that functionality. However, I’ve revisted it now and set up chceck box functionaltiy so I’ve reverted back to the action row. Thank you for the suggestions. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [January 20, 2024, 4:07pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/6 "2024-01-20T16:07:10Z")
Hvaing said that, do you know if there is a way to set the visibility of a particilar action in an action row rather than just being able to allow it? Ideally I would like to hide actions that a user doesn’t have access to. Thanks ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6e4bcc7b7d58a4ab0562984c8ecd25a2d0bb8562.png) ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 20, 2024, 5:56pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/7 "2024-01-20T17:56:25Z")
Hmm, I can’t find a way to do that with an action row. Do you usually deactivate certain groups of buttons, or is it random? My only thought would be to set up multiple action row components and hide or show each one based on certain conditions. Could work if you deactivate groups of buttons, but not as practical if each button is controlled independently. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [January 20, 2024, 6:59pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/8 "2024-01-20T18:59:31Z")
It’s random unfortunately but hopefully will be all on soon so it’s not too much of a problem. ---
**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:** [January 20, 2024, 11:06pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/9 "2024-01-20T23:06:46Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76e4eec3b28656aa028fbec4561f08f9f474d850.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/6823a5fdb61a615ebe4a376e351067e5ea20cf98.jpeg) ```auto .choices div { align-items: center; } ``` Here’s the CSS alternative. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [January 23, 2024, 4:08pm UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/10 "2024-01-23T16:08:06Z")
> [@ThinhDinh](#): > > ```auto > .choices div { > align-items: center; > } > > ``` Hummm unfortunately this isn’t working in my app. I’ve tried it in demo app and it works just fine but it’s not working in my main one. Could it be becasue of a hierarchy somewhere? ---
**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:** [January 24, 2024, 12:09am UTC](https://community.glideapps.com/t/custom-css-centre-a-choice-component/69782/11 "2024-01-24T00:09:12Z")
Can you show us how you’re setting up your container and CSS in the main one?