# Center a label relative to another label

**URL:** <https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 19, 2023, 7:42pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607 "2023-07-19T19:42:59Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\
**Post date:** [July 19, 2023, 7:42pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/1 "2023-07-19T19:42:59Z")

</div>

Is there a way to center a label relative to another label?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [July 19, 2023, 7:52pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/2 "2023-07-19T19:52:51Z")

</div>

Try these buttons at the top of the designer, specifically the circled one for `align vertically`.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b94ad929bf9a64451ca59b60f2f7f4f49951f04.png)

---

<div class="post-metadata">

**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\
**Post date:** [July 19, 2023, 7:57pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/3 "2023-07-19T19:57:12Z")

</div>

That’s for vision? Isn’t it?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [July 19, 2023, 7:58pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/4 "2023-07-19T19:58:14Z")

</div>

It's in perspective too, if you are using a coordinate container, that is.

---

<div class="post-metadata">

**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\
**Post date:** [July 19, 2023, 8:02pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/5 "2023-07-19T20:02:54Z")

</div>

Yes sorry, I didn’t specify, I’m using flex containers.

---

<div class="post-metadata">

**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:** [July 19, 2023, 8:03pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/6 "2023-07-19T20:03:51Z")

</div>

'Alignment' relative to other components is a concept that doesn't apply to flex containers.

> **[Flexbox Froggy](https://flexboxfroggy.com/)**
>
> A game for learning CSS flexbox

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [July 19, 2023, 8:04pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/7 "2023-07-19T20:04:57Z")

</div>

~~I use labels with no text as spacers to line up my components. You could use these to adjust another flex row container's position to line up with the first label and then set that row container to center content and place your second label in that.~~

Edit: Don't do this, bad practice

---

<div class="post-metadata">

**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:** [July 20, 2023, 12:51am UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/8 "2023-07-20T00:51:59Z")

</div>

> [@ryan.white](#):
>
> use labels with no text as spacers

Nooo, this is what the css props:

- padding
- margin
- gap
- grow
- shrink
- basis

are for!

By adding wasteful components to the dom, you're slightly reducing performance each time

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [July 20, 2023, 1:13am UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/9 "2023-07-20T01:13:03Z")

</div>

After I discovered gap worked on more than just flex repeaters I ended remaking a lot of my interfaces to use that with a mix of padding. I don't remember where I picked up using blank labels as spacers but I still use it in rare occasions. Setting `paddingLeft` to 180px seems wrong to me, if its something small like 5px or 10px then I have no problem.

Edit: This got me looking a bit as to where I picked it up. Looks like whatever templates we had use the 'blank label as spacer' method. See the tree of the view from the supposed skeleton project:

> **Bad Practice**
>
> ![Untitled2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/641b226fc60f610aa70f9c6a085030d923b6a42c.png)

---

<div class="post-metadata">

**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:** [July 20, 2023, 3:26am UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/10 "2023-07-20T03:26:46Z")

</div>

Yeah when I first started Perspective and had no prior web dev experience, I relied on the examples like that which developed poor habits until I learned better (including using the spacer method). These examples should _really_ be fixed as they start new folk off in the wrong direction. Similarly, the Vision navigation template, apart from looking like it's from the 90's 😛, has a component on it that calls `system.alarm.queryStatus` which is extremely bad for client performance, especially if you see this and add more e.g. for summarising alarms from more than 1 area. (I did this very early on and it broke the panel PC running it, despite being spec'd pretty high)

---

<div class="post-metadata">

**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\
**Post date:** [July 21, 2023, 5:00pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/11 "2023-07-21T17:00:24Z")

</div>

Where’s the Gap option?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [July 21, 2023, 5:25pm UTC](https://forum.inductiveautomation.com/t/center-a-label-relative-to-another-label/76607/12 "2023-07-21T17:25:00Z")

</div>

You have to add it into you styling for the component. Either directly on the component, in a Style Class, or in a Style Sheet / Theme file.

Just because it isn't there by default doesn't mean it isn't supported.

In my experience with very rare exceptions (can't even think of one atm) if your browser supports it, it will work.
