I've often had this problem in the past and to this date haven't found a good solution that works universally.
Essentially, the problem is this. If I want to align things vertically in a container, I'll use verticalAlign="middle"
, but this doesn't exactly solve the problem of truly aligning text vertically. Text is always too high vertically, so in the past, I've just adjusted paddingTop
and paddingBottom
to compensate, but that doesn't work as the font for _sans
differs from operating system to operating system.
Given the following layout code, you'll see the problem:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Group width="100" height="50">
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:fill>
<s:SolidColor color="#333333"/>
</s:fill>
</s:Rect>
</s:Group>
<s:VGroup width="100%" height="100%"
paddingTop="10" paddingBottom="10"
paddingRight="10" paddingLeft="10"
verticalAlign="middle">
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="#CCCCCC" weight="1"/>
</s:stroke>
</s:Line>
</s:VGroup>
<s:Label text="100 Percent!" top="10" bottom="10"
left="10" right="10" verticalAlign="middle"
textAlign="center" color="#FFFFFF"/>
</s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="center"
verticalAlign="middle"/>
</s:layout>
</s:Application>
What happens is pretty clear. The horizontal line gets aligned to the exact middle of the box, but the text is offset by some arbitrary amount. I assume that this is because of the text baseline alignment or something. Is there a way to fix this regardless of the font size and face? I'd like to have the line essentially go right through the middle of the text, ignoring the extra space possibly needed for below the logical line of text (ie: ignore the bottom part of "g's" and "j's" when laying things out).
Evidently not, though a custom solution might exist.