有没有办法确保文本元素真正与垂直中间对齐？

Question

我过去经常遇到这个问题，到目前为止还没有找到通用的好解决方案。

本质上，问题是这样的。如果我想在容器中垂直对齐内容，我将使用 verticalAlign="middle"，但这并不能完全解决真正垂直对齐文本的问题。文本在垂直方向上总是太高，因此在过去，我只是调整了 paddingTop 和 paddingBottom 进行补偿，但这不能用作 的字体_sans 因操作系统而异。

给出以下布局代码，您将看到问题：

<?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>

发生的情况非常清楚。水平线与框的正中间对齐，但文本偏移了任意数量。我认为这是由于文本基线对齐或其他原因造成的。无论字体大小和字体如何，有没有办法解决这个问题？我想让该行基本上穿过文本的中间，忽略文本逻辑行下方可能需要的额外空间（即：在布局时忽略“g's”和“j's”的底部）。

Answer 1

查看布局限制。您还可以研究一个简单的绑定表达式，以便他们即时计算确切的需求。尽管它们通常是完美的。

他们还很好地响应了调整大小事件气泡。

Answer 2

尝试：

<s:Group width="100" height="50">
   <s:Line width="100%" verticalCenter="0">
      <s:stroke>
         <s:SolidColorStroke color="#CCCCCC" weight="1"/>
      </s:stroke>
   </s:Line>

   <s:Label text="100 Percent!" horizontalCenter="0" verticalCenter="0"/>
</s:Group>

Answer 3

显然不是，尽管可能存在定制解决方案。