Как отцентрировать значок в одну строку - PullRequest
0 голосов
/ 15 ноября 2018

Я хочу выровнять кнопку редактирования, как вы видите на следующих скриншотах, с текстом. Так что это одна и та же высота. Но моя проблема в том, что он не выровняется по центру с другим текстом. Я также пытался использовать FlexboxLayout. Но он остается прежним.

Это то, что я хочу

What I want

Это то, что я сделал

What I made

Это шаблон VueJs

<template>
<Page class="confirmPage" actionBarHidden="true">
    <DockLayout>
        <FlexboxLayout dock="top" id="top">
            <Button class="back fas btn btn-db" :text="'\uf060 Route Details' | unescape" @tap="$navigateBack"></Button>
        </FlexboxLayout>
        <FlexboxLayout dock="bottom" id="bottom">
            <Button class="confirm btn btn-b-db btn-r btn-t-w" text="BEVESTIG" @tap="getThePathDataBeforeContinuing"></Button>
        </FlexboxLayout>
        <StackLayout dock="center">
            <GridLayout columns="2*, 2*, 1*" rows="*, *, *" class="routeDetails">
                <Label row="0" col="0" class="centerIt" text="Ziekenhuis"></Label>
                <Label row="0" col="1" :text="navigationData.hospital.name"></Label>
                <Label row="0" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditHospital"></Label>

                <Label row="1" col="0" class="centerIt" text="Startpunt"></Label>
                <Label row="1" col="1" :text="navigationData.startpoint.name"></Label>
                <Label row="1" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditStartpoint"></Label>

                <Label row="2" col="0" class="centerIt" text="Bestemming"></Label>
                <Label row="2" col="1" :text="navigationData.endpoint.name"></Label>
                <Label row="2" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditEndpoint"></Label>
                <ActivityIndicator :busy="isBusy" width="100" height="100" class="activity-indicator"></ActivityIndicator>
            </GridLayout>
         </StackLayout>
    </DockLayout>
</Page>

...