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. 在按钮和imageView中放置一个VXbox，并在VBox中放置带有文本的标签。

提前致谢！

Answer 1

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,30,0); -fx-text-fill: rgb(255,255,255); -fx-alignment: center;">
    <graphic>
        <BorderPane>
            <center>
                <ImageView>
                    <Image url="file:///....png"/>
                </ImageView>
            </center>
            <bottom>
                <Label text="Text"/>
            </bottom>
        </BorderPane>
    </graphic>
</Button>

您可能还需要尝试设置边框窗格的首选大小，以使其填充分配给按钮的区域。