# Center align not aligning in center **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 3, 2025, 7:26pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674 "2025-04-03T19:26:52Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![controls4689](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@controls4689](https://forum.inductiveautomation.com/u/controls4689)\ **Post date:** [April 3, 2025, 7:26pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/1 "2025-04-03T19:26:52Z")
With how obtuse perspective has been for me so far, I am not surprised by this, picture attached below. I tried all the other aligns too, this is clearly not the center as the C is at the edge and the P is no where near, wtf. if anyone knows why this happening I would appreciate that, thank you. ![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/c/9c994c0fd8d34826ab802cadc5332a9dea3c3292.png) ---
**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\ **Post date:** [April 3, 2025, 8:22pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/2 "2025-04-03T20:22:08Z")
You can use CSS props like `align-items: center` on the object containing the text. You should be able to add your own style prop using the plus icon and type in this CSS prop, with `center` as the value. Also, consider using the `Advanced Stylesheet` and create custom classes with a lot more CSS options. ---
**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:** [April 3, 2025, 8:40pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/3 "2025-04-03T20:40:05Z")
Copy and paste the component into here and format it as shown in [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831). We can then reproduce the problem and possibly find the problem and solution. And what component is having this problem? A label? Markdown? Something else? Please keep the conversation polite. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 3, 2025, 9:13pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/4 "2025-04-03T21:13:27Z")
> [@controls4689](#): > > With how obtuse perspective Perspective has a learning curve for sure, since its technology is wildly different to most "normal" hmi software, including Vision, but once you get the hang of it going back to Vision is a drag... ---
**Author:** ![controls4689](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@controls4689](https://forum.inductiveautomation.com/u/controls4689)\ **Post date:** [April 3, 2025, 9:24pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/5 "2025-04-03T21:24:25Z")
It is not a learning curve but just needlessly complicated in most aspects in my opinion. When i center align something, it should just align in the center. The tab container should function properly without dragging my own coordinate container into each tab first. Hiding buttons based on who is logged in was needlessly complicated. For the life of me I cannot understand why there isnt just a level indicator like in vision! and there have been 10s of other things that are like this. I am trying to embrace ignition but perspective has been very clunky for me, and I shouldn't have to experience a "learning curve" for simple things such a push button toggling a boolean, password protection, and format transforms with °F in my opinion. ---
**Author:** ![controls4689](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@controls4689](https://forum.inductiveautomation.com/u/controls4689)\ **Post date:** [April 3, 2025, 9:26pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/6 "2025-04-03T21:26:53Z")
```python [ { "type": "ia.input.text-area", "version": 0, "props": { "text": "Phosporic Acid", "style": { "textAlign": "center", "borderStyle": "solid", "borderTopLeftRadius": 0, "borderTopRightRadius": 0, "borderBottomLeftRadius": 0, "borderColor": "#8B8585", "borderWidth": 2, "overflowWrap": "normal" } }, "meta": { "name": "TextArea" }, "position": { "y": 18.98, "width": 80, "height": 65 }, "custom": {} } ] ``` ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 3, 2025, 9:28pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/7 "2025-04-03T21:28:26Z")
> [@controls4689](#): > > and format transforms with °F in my opinion I agree with you on this one! °C all the way! > [@controls4689](#): > > Hiding buttons based on who is logged in was needlessly complicated Not sure what you mean here, you can just use `isAuthorized` along with the security level, or better, read canWrite from the tag and use that instead > [@controls4689](#): > > level indicator like in vision There's the progress component and the analogue level indicator, although I did create my own since I don't like the look. The progress component is similar to the vision component though and can be styled however you want with css props [Perspective - Progress | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-progress) ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [April 3, 2025, 9:43pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/8 "2025-04-03T21:43:25Z")
> [@controls4689](#): > > needlessly complicated Ignition isn't in total control in Perspective, unlike Vision. Perspective has to deliver what browsers need/expect, and it is **those** that are needlessly complicated. But users want browser operation, and Perspective is the easiest way to get that (not _easy_, just _easiest_, from a controls background). And Vision is expected to continue working for the foreseeable future, so use it if you like. ---
**Author:** ![controls4689](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@controls4689](https://forum.inductiveautomation.com/u/controls4689)\ **Post date:** [April 3, 2025, 9:48pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/9 "2025-04-03T21:48:24Z")
yes and I used the that for the fill level on tanks, but vision has the cutaways and you can group the items then do the difference and then put the fill level behind all that and it looks great, perspective literally has the tank cutaways but wont let you take the difference or have a level indicator. ---
**Author:** ![controls4689](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@controls4689](https://forum.inductiveautomation.com/u/controls4689)\ **Post date:** [April 3, 2025, 9:52pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/10 "2025-04-03T21:52:51Z")
I understand, yes I would like web functionality so perspective is the way I am going for this project but I do not see myself continuing to use it unless necessary. ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [April 3, 2025, 10:15pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/11 "2025-04-03T22:15:32Z")
> [@controls4689](#): > > ```python > { > "textAlign": "center", > "borderStyle": "solid", > "borderTopLeftRadius": 0, > "borderTopRightRadius": 0, > "borderBottomLeftRadius": 0, > "borderColor": "#8B8585", > "borderWidth": 2, > "overflowWrap": "normal" > } > > ``` It looks like you're running up against the left padding of the text area component. Unfortunately setting padding for text area doesn't seem to do anything. ---
**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:** [April 3, 2025, 10:29pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/12 "2025-04-03T22:29:11Z")
Examining with a browser Development Tools (F12) reveals the following: ![Text Area padding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/47814ba3dbcbe052f87d3f5882f795d46fdb13ae.png) 1. The green box indicates the padding that has been applied to the component. 2. It's 8px all around. 3. It is set in by CSS `ia_textArea` in the theme. In other words, the Text Area component width is too narrow for your text so it overflows on the right (as shown by the 'c' in the green margin). You can fix the problem by overriding the theme by adding the following into the Text Area component's PROPS: `style.padding-left : 0px` `sytle.padding-right : 0px` Alternately, make the Text Area wider. The stylesheet appears to set the padding to 0.5rem. See the article below for more on that. [Rem in CSS: Understanding and Using rem Units — SitePoint](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/#:~:text=In%20CSS%20rem%20stands%20for,and%20spacing%20throughout%20your%20UI). ---
**Author:** ![controls4689](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@controls4689](https://forum.inductiveautomation.com/u/controls4689)\ **Post date:** [April 3, 2025, 10:34pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/13 "2025-04-03T22:34:27Z")
this was extremely helpful thank you. Yes sadly just resizing it wasn't an option as i have over 10 tanks, i'm trying to fix across 800px and still be legible. I am not extremely familiar with css, so it appears I have a lot of reading to do. This worked and is centered well now, thank you. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [April 3, 2025, 11:04pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/14 "2025-04-03T23:04:53Z")
Your mention if 800px and coordinate containers scares me a little... in general, designing for specific pixel sizes like that is an antipattern and you're just asking for trouble (what if a future OS/browser/etc update gives you fifty less pixels)? If you're making the classic "here's a roughly skeumorphic picture of the whole facility at a glance" HMI page, by all means use a coordinate container, but outside of that you're ultimately better off using (nested) flex containers or another approach that's less restrictive. BIJC also has a Pan/Zoom container available as an add-on module that sidesteps the problem with fitting a coordinate container with a fixed aspect ratio on a 'too small' device: > [@Pan Zoom Container](https://forum.inductiveautomation.com/t/pan-zoom-container/75093): > > BIJC is pleased to announce its latest module, a Pan Zoom container for Perspective. There have been a number of outstanding examples of Pan Zoom using an XY container but these are very specific and generally require advanced scripting and CSS skills. BIJC container simplifies this process and allows the XY container to be responsive. In its simplest deployment, a developed XY container can be placed inside BIJCs Pan Zoom container and it will automatically fit to any screen size. If the deve… ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 3, 2025, 11:08pm UTC](https://forum.inductiveautomation.com/t/center-align-not-aligning-in-center/104674/15 "2025-04-03T23:08:33Z")
> [@controls4689](#): > > It is not a learning curve > [@controls4689](#): > > I am not extremely familiar with css These two statements are at odds with each other; Perspective _requires_ some level of CSS knowledge to become proficient in it and to make it enjoyable to work in, but this has a learning curve for most integrators. Styles and CSS are synonymous in Perspective > [@controls4689](#): > > but vision has the cutaways and you can group the items then do the difference and then put the fill level behind all that and it looks great This goes against ASM HMI standards though, but it can be made fairly easily with an SVG. Perhaps not helping to entice you more to Perspective, but an SVG with a simple square in it can have a style added to it to turn it into a simple level using `clipPath: inset(0 80% 0 0)` which will clip the top by 80% down, and leave 20% level showing - just bind to this and you have a dynamic level. You can use this to then create whatever levels you want, however you want. This works for complex shapes e.g. cutaway as well. It's easy to cherry pick and be frustrated and say "this other software has this in-built and simple! why doesn't Ignition??", but if you take Ignition as a whole and compare it to other software, there's no comparison; Ignition takes the cake _and_ eats it too. Some things are made simple, others are possible but need a little massaging - _but 9 times out of 10 you can actually do what you want to do_ which is not the case in a lot of other SCADA platforms; you can do what you can do and nothing more. Perspective may not have all the functionality you want by default, but there is a _ **lot** _ you can do with CSS. Some will like having this flexibility at the expense of time involved in building up your own resources, others just want a [insert SCADA-which-cannot-be-named-else-I'll-get-in-trouble here aka the Win10 Paint of the SCADA world] which is simple and easy to use, but has very limited capability and flexibility. Some want a mixture. It's impossible to cater to all 🤷‍♂️