Javafx 将VBox和HBox的项目对齐到与其他项目不同的位置

我正在用JavaFXML设计一个仪表板。以下是仪表板的屏幕截图：

以下是FXML文件：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.farhad.controllers.DashboardMenuController"
      spacing="50.0"
      id="dashboard-menu"
      stylesheets="@../style/dashboard.css">
    <HBox alignment="CENTER" spacing="5.0">
        <ImageView>
            <Image url="@../icons/user.png" />
        </ImageView>
        <VBox spacing="5.0" alignment="CENTER_LEFT">
            <Label id="user-full-name" text="User full name"/>
            <Label id="user-login-name" text="User login name"/>
        </VBox>
    </HBox>
    <Separator />

    <!--    About User -->
    <VBox spacing="20.0">
        <HBox>
            <ImageView>
                <Image url="@../icons/overview.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Overview"/>
            <Separator orientation="VERTICAL"/>
        </HBox>
        <HBox>
            <ImageView>
                <Image url="@../icons/accounts.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Accounts" />
            <Separator orientation="VERTICAL"/>
        </HBox>
        <HBox>
            <ImageView>
                <Image url="@../icons/transaction.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Transactions"/>
            <Separator orientation="VERTICAL"/>
        </HBox>
        <HBox>
            <ImageView>
                <Image url="@../icons/products.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Your Products"/>
            <Separator orientation="VERTICAL"/>
        </HBox>
    </VBox>
    <Separator />

        <!--    Settings -->
    <VBox spacing="20.0">
        <HBox>
            <ImageView>
                <Image url="@../icons/add-account.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Add New Account" />
            <Separator orientation="VERTICAL"/>
        </HBox>
        <HBox>
            <ImageView>
                <Image url="@../icons/merchant.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Be Merchant"/>
            <Separator orientation="VERTICAL"/>
        </HBox>
        <HBox>
            <ImageView>
                <Image url="@../icons/settings.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="User Settings" />
            <Separator orientation="VERTICAL" />
        </HBox>
    </VBox>

    <!--  Logout  -->
    <VBox alignment="BOTTOM_CENTER">
        <HBox >
            <ImageView>
                <Image url="@../icons/logout.png" />
            </ImageView>
            <Label styleClass="dashboard-menu-item-label" text="Logout" />
            <Separator orientation="VERTICAL" />
        </HBox>
    </VBox>
</VBox>

我的问题是在注销标签和一个小的白色垂直分隔在每个菜单项。我想将注销标签放在父应用程序

VBOX

的底部，并在

HBOX

的左侧放置一个白色的垂直分隔符。 如何修改代码，使我的仪表板如下所示：

---

假设此仪表板在

VBox

底部有一个注销标签，一个选项：在标签和分隔符之间放置一个

。非常感谢。这对他们两个都有效。我把父VBox放在包含注销标签的HBox之前，也可以。