# DropDown Text Alignment

**URL:** <https://forum.inductiveautomation.com/t/dropdown-text-alignment/56648>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 28, 2022, 8:27pm UTC](https://forum.inductiveautomation.com/t/dropdown-text-alignment/56648 "2022-02-28T20:27:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![OscarJ](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@OscarJ](https://forum.inductiveautomation.com/u/OscarJ)\
**Post date:** [February 28, 2022, 8:27pm UTC](https://forum.inductiveautomation.com/t/dropdown-text-alignment/56648/1 "2022-02-28T20:27:29Z")

</div>

I am using version 8.1.5.  
I would like to know how to center the text of this component, I tried this but I don’t see any change.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/c/2c123ab2192cc5ffd27a2a87cfc230041682833a.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/710836f92dfb3586bb4d1a58f0babd6a0fa4826e.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 28, 2022, 8:51pm UTC](https://forum.inductiveautomation.com/t/dropdown-text-alignment/56648/2 "2022-02-28T20:51:10Z")

</div>

You’d have to use your browser’s Developer Tools to figure out which style class it is using and inject some CSS. You can get an idea of how this is done in [Request Focus in Perspective Table Search Bar - #5 by Transistor](https://forum.inductiveautomation.com/t/request-focus-in-perspective-table-search-bar/56542/5).

Note that centering numeric values like that is going to look amateurish. Having them right-aligned would be best so that thousands, hundreds, tens and units line up.

Have a good read of some user interface design guides and look at professionally designed user interfaces on your computer and phone.

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [March 8, 2022, 3:54pm UTC](https://forum.inductiveautomation.com/t/dropdown-text-alignment/56648/3 "2022-03-08T15:54:47Z")

</div>

I’ve also run into this issue on v8.1.12; `textAlign` on the `style` just doesn’t seem to do what you’d expect it to do. `dropdownStyle` does work on the dropdown elements though (at least in v8.1.12).

If you still want to center the actual selected value of your dropdown, CSS does seem to be the way to go; you can do it like Transistor suggested or you can use a custom theme. I’m using a custom theme, and this is what I had to add to my CSS file to get the dropdowns to center properly:

```auto
.ia_dropdown__search {
	flex: 0 1 auto !important;
	min-width: 0px !important;
}

.ia_dropdown__valueSingle {
	justify-content: center !important;
	min-width: 5px !important;
	flex: 1 1 auto !important;
}

```

The `valueSingle` part makes sure the actual value is centered (note that by default min-width is 45px; I reduce it here because for my application, some dropdowns are rather narrow), and the `search` part is to stop a search-related box shifting everything to the left if you have search enabled. Not sure what the search empty box is, but it pops up and shifts everything off-center if you don’t force it not to grow and to have 0 min width (see below).

Just setting `style` `textAlign: center`:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/5646b7eb92b7161159243ebcd0fbb0eb6a2484e3.png)

CSS changes:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/9018d5cdb0faa7b19579ac2b2a384f884051212b.png)

Hope this helps!