按钮样式与图像

Question

我想知道如何实现以下按钮样式,其中文本位于JavaFx中的图像下面？

我尝试了很多但都徒劳无功.任何帮助,将不胜感激.

Answer 1

关键是contentDisplay属性,将其设置为"TOP".

使用fxml:

<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
  <graphic>
    <ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="@image.png" preserveRatio="false" smooth="false" />
      </image>
    </ImageView>
  </graphic>
</Button>

或CSS:

.your-selector {
    -fx-content-display: top;
}

在这里检查CSS参考.