Centering Controls (Lua/XML)

[Fooberticus]

Hello, I've written my first addon and will publish it as soon as I figure out this one issue.

I started out simple, with a TopLevelControl that contained a Label. The desired display would be the text in the label appearing centered on the screen, just above the reticle. This was easy and direct enough in XML (pretty much straight from the "build your first addon" tutorial):

...
<TopLevelControl name="SomeTopLevelControl" hidden="true" mouseEnabled="true" movable="true" clampedToScreen="true">
      <Dimensions x="300" y="25" />
      <Anchor point="BOTTOM" relativeTo="GuiRoot" relativePoint="CENTER" offsetY="-40"/>
 
      <Controls> 

        <Label name="FooLabel" font="ZoFontWinH1" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            wrapMode="TRUNCATE" verticalAlignment="CENTER" horizontalAlignment="CENTER" text="Example Text Blah">
          <Anchor point="TOP" relativeTo="$(parent)" relativePoint="TOP" />
        </Label>

      </Controls>
</TopLevelControl>
...

Things got a little tricky when I wanted to add an icon to the left of the text. In order to get the texture to appear directly to the left of the text, I had to basically left-justify everything and make the anchors for the texture and the text relative to one another, something like:

...
<TopLevelControl name="SomeTopLevelControl" hidden="true" mouseEnabled="true" movable="true" clampedToScreen="true">
      <Dimensions x="300" y="25" />
      <Anchor point="BOTTOM" relativeTo="GuiRoot" relativePoint="CENTER" offsetY="-40"/>
 
      <Controls> 
	  
	<Texture hidden="true" name="$(parent)Icon" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            textureFile="/esoui/art/lfg/lfg_icon_healer.dds">
          <Dimensions x="40" y="40"/>
          <Anchor point="RIGHT" relativeTo="FooLabel" relativePoint="LEFT"/>
        </Texture>

        <Label name="FooLabel" font="ZoFontWinH1" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            wrapMode="TRUNCATE" verticalAlignment="CENTER" horizontalAlignment="CENTER" text="Example Text Blah">
          <Anchor point="LEFT" relativeTo="$(parent)Icon" relativePoint="RIGHT" />
        </Label>

      </Controls>
</TopLevelControl>
...

The problem is, of course now the Icon-Text combination are no longer centered in the screen since it's left justified. And I can't for the life of me figure out the solution to get the Icon-Text control combo to be centered on screen. I've worked with HTML and CSS for a couple of decades but the solution to this simple problem is eluding me.

I've considered shimming the placement of the controls using Lua logic to calculate the position, but that seems ridiculous and there has to be a simple solution using anchors that I'm just not seeing. I've messed with it for several hours at this point and I thought I'd ask the experts.

Thank you for any help in the matter!