FXML / CSS：图像居中，底部居中的按钮

Question

我有一个带有图标和文本的按钮，我不知道如何将图标放置在按钮的中央，而将文本放置在按钮的左下方。这就是现在的样子：

<Button text="Text" GridPane.rowIndex="0" GridPane.columnIndex="2" prefWidth="135" prefHeight="110" style="-fx-background-color: rgb(176,30,0); -fx-text-fill: rgb(255,255,255); -fx-alignment: BOTTOM_LEFT;">
    <graphic>
        <ImageView>
            <Image url="file:///....png"/>
        </ImageView>
    </graphic>
</Button>

我尝试过的两件事没有起作用：1.给ImageView一个单独的对齐属性。2.将VXbox放在按钮和imageView内，并在VBox内放置带有文本的标签。

提前感谢！

Answer 1

contentDisplay属性控制图形相对于文本的位置。 contentDisplay属性控制整个内容的位置。

所以

alignment

或一些类似的组合，应该起作用。