我有一个带有图标和文本的按钮，我不知道如何将图标放置在按钮的中心，而将文本放置在按钮的左下方。这就是现在的样子：
<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.在按钮和imageView内放置一个VXbox，并在VBox内放置带有文本的标签。
谢谢！
contentDisplay属性控制图形相对于文本的位置。 alignment属性控制整个内容的位置。
所以
<Button text="Text" GridPane.rowIndex="0" GridPane.columnIndex="2" prefWidth="135" prefHeight="110"
alignment="BOTTOM_LEFT" contentDisplay="TOP"
style="-fx-background-color: rgb(176,30,0); -fx-text-fill: rgb(255,255,255);">
或某些类似的组合应该起作用。
如果您希望在CSS中进行设置，-fx-alignment: bottom-left; -fx-content-display: top ;将执行相同的操作。
contentDisplay属性并不能完全控制图形的位置。您可能需要使用您提出的放置带有图像视图和标签作为图形的容器的想法。在这种情况下，您可能需要对齐中心。 BorderPane可能比VBox更接近您的需求：
<Button GridPane.rowIndex="0" GridPane.columnIndex="2" prefWidth="135" prefHeight="110" style="-fx-background-color: rgb(176,255); -fx-alignment: center;">
<graphic>
<BorderPane>
<center>
<ImageView>
<Image url="file:///....png"/>
</ImageView>
</center>
<bottom>
<Label text="Text"/>
</bottom>
</BorderPane>
</graphic>
</Button>
您可能还需要尝试设置边框的首选大小，以使其填充分配给按钮的区域。