I have a textlabel, and a Robux icon. I want the text as well as the icon to be centered, based on the texts length. Currently having the text alignment set to center, which yes centers the text. But with the robux icon included, that offsets it. I want it so the distance from the left of the robux icon to the left edge is the same length as the distance for the edge of the text to the right edge.
Right now, the robux icon adds on more to the left, and thus makes it look not centered
Put both the text, and the robux icon, inside of a transparent holder frame, then center that. The UI design looks great so far by the way!
By setting the robux icon to one edge of the frame, and the text to the other, you could center them both perfectly.
Create a second smaller encasement grouping frame that is not visible, that specifically holds those two elements. Either that or use padding.
Figured it out after messing with numbers and stuff
-- 'Cost' is the label for the cost of the item
-- 'RobuxIcon' is the Robux icon
-- 'Frame' is the parent of both 'Cost' and 'RobuxIcon'
-- Set the Cost before going further (this is so we have TextBounds sorted out)
Cost.Text = '10'
-- Get both the RobuxIcon and Cost's length (X)
local RobuxIconSize = RobuxIcon.AbsoluteSize.X
local CostSize = Cost.TextBounds.X
-- Add both those sizes together
local CenterSize = RobuxIconSize + CostSize
-- Position based on previous calculations
RobuxIcon.Position = UDim2.new(0.5, -(CenterSize / 2) - 2, 0.95, 0)
Cost.Position = UDim2.new(0.5, (CenterSize / 2) + 2, 0.95, 0)
Also note, the ‘-2’ and ‘+2’ are to incorporate a 4 pixel gap between the Robux icon and the Cost text.
RobuxIcon AnchorPoint (0, 0)
Cost AnchorPoint (1, 0)
And that’ll produce this as a result
