如何将图标居中对齐

Question

我希望将以下屏幕截图中的编辑按钮与文本对齐。所以它是一个相同的高度。但是我的问题是它不会与其他文本居中对齐。我也尝试使用FlexboxLayout。但它保持不变。

这就是我想要的

这就是我做的

这是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>