Как установить вертикальное выравнивание текста метки по центру в мобильном проекте Flex?

Проект является мобильным гибким. Я поместил метку и текстовый ввод в контейнер vgroup:

    <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <s:HGroup>
            <s:Label id="l_url" text="url"/>
            <s:TextInput id="url" invalid="url.getFocus()"/>
        </s:HGroup>
        <s:HGroup>
            <s:Button label="Enregistrer" click="enregistrer(event)" styleName="" />
            <s:Button label="Annuler" click="navigator.popView()"/>
        </s:HGroup>
    </s:VGroup>

Во время выполнения текст метки находится вверху метки:

введите здесь описание изображения

Как разместить текст метки по центру по вертикали?


apache-flex flex-mobile
person pheromix    schedule 12.12.2013    source источник
comment
Не могли бы вы вместо этого использовать контейнер формы?   -  person JeffryHouser    schedule 12.12.2013

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, вам не хватает verticalAlign="middle" в вашей HGroup.

<s:HGroup verticalAlign="middle">
  <s:Label id="l_url" text="url"/>
  <s:TextInput id="url" invalid="url.getFocus()"/>
</s:HGroup>

Кроме того, я обычно не использую контейнеры форм, но, поскольку вы работаете только с мобильным пользовательским интерфейсом, это может быть хорошим предложением для изучения здесь, если вы не возражаете против ограничений.

person Manius    schedule 13.12.2013

arrow_upward
1
arrow_downward

Попробуйте verticalAlign="baseline":

<s:HGroup width="100%" verticalAlign="baseline" paddingLeft="8" paddingRight="8">
    <s:Label text="Игровые столы:" />
    <s:RadioButton id="_allBtn" group="{_filter}" label="Все" selected="true" />
    <s:RadioButton id="_vacBtn" group="{_filter}" label="Свободные" />
    <s:RadioButton id="_fullBtn" group="{_filter}" label="Полные" />
    <s:Spacer width="100%" />
    <s:Label text="Игроки в лобби: {_users.length}" />
</s:HGroup>

Вот как это выглядит в моем веб-приложении Flex (см. Label и RadioButtons вверху ряд):

введите здесь описание изображения

person Alexander Farber    schedule 13.12.2013