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”和“j”的底部）。

Answer 1

了解布局约束。您还可以查看一个简单的绑定表达式，以便动态计算确切的需求。虽然它们一般都很完美。

他们也很好地回应了resize事件泡泡。

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

显然不是，虽然可能存在自定义解决方案。

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

3 个答案: