JavaFX FXML如何实现Label文本左对齐且ImageView图片居中显示

你当前外层VBox设置了全局alignment="CENTER"，会统一控制所有子元素居中，要实现Label左对齐、ImageView保留居中，有两种常用实现方案：

方案1：直接修改Label属性（改动最小，推荐） #

给两个Label添加maxWidth="Infinity"让Label占满父容器的可用宽度，再设置自身文本左对齐即可，不需要修改其他布局结构：

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

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>


<VBox prefHeight="300.0" prefWidth="600.0" alignment="CENTER"  fx:controller="controller.LoginController" xmlns:fx="http://javafx.com/fxml/1" spacing="10">


    <HBox alignment="TOP_RIGHT" spacing="10">
    <Button fx:id="loginBtn" text="Login" onAction="#handleLogin"/>
    <Button fx:id="exitBtn" text="Exit" onAction="#handleExit" />
    </HBox>
    
    <!-- 新增maxWidth和alignment属性实现左对齐 -->
    <Label text="STPFX" maxWidth="Infinity" alignment="BASELINE_LEFT" />
    <Label text="Payroll Management System" maxWidth="Infinity" alignment="BASELINE_LEFT"/>
    <ImageView fitHeight="300" fitWidth="300" >
        <image><Image url ="@stp.jpg"  /></image>
    </ImageView>
    
</VBox>

如果需要Label左边留边距，还可以给Label添加padding="0 0 0 20"属性，左边就会留出20px的空白。

方案2：嵌套布局容器（适合后续要扩展左对齐区域的场景） #

把两个Label放到一个单独的HBox/VBox容器中，设置该容器宽度占满父容器、左对齐即可：

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

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>


<VBox prefHeight="300.0" prefWidth="600.0" alignment="CENTER"  fx:controller="controller.LoginController" xmlns:fx="http://javafx.com/fxml/1" spacing="10">
    <HBox alignment="TOP_RIGHT" spacing="10">
        <Button fx:id="loginBtn" text="Login" onAction="#handleLogin"/>
        <Button fx:id="exitBtn" text="Exit" onAction="#handleExit" />
    </HBox>
    
    <!-- 嵌套VBox装Label，设置左对齐 -->
    <VBox maxWidth="Infinity" alignment="CENTER_LEFT" spacing="10">
        <Label  text="STPFX"  />
        <Label text="Payroll Management System"/>
    </VBox>

    <ImageView fitHeight="300" fitWidth="300" >
        <image><Image url ="@stp.jpg"  /></image>
    </ImageView>
</VBox>

内容的提问来源于stack exchange，提问作者Mimi