0

In HTML5 to alight a text directly beneath an image we can use <figcaption>.

<figure>
  <img src="img.jpg" alt="my img"/>
  <figcaption> Your text </figcaption>
</figure>

Now I am working on a JavaFX application and I want to alight the next directly beneath each image. In the main I have a for loop that generate those image and texts.

In the FXML I have 

<HBox xmlns:fx="http://javafx.com/fxml" fx:controller="sample.AudioButtonController"  >
    <padding>
        <Insets topRightBottomLeft="30" />
    </padding>
    <children>
        <ImageView
                fitHeight="120" fitWidth="120" fx:id="image" onMousePressed="#mousePressed">
        </ImageView>
        <Text fx:id="text"/>
    </children>
</HBox>

The text shows in front of each image. I want to align ehe text exactly under each image.

How to do that?

This is how it looks right now :

Picture of the application

  • 3
    Use a `VBox` instead of an `HBox`? You can also consider using a `Label` here, setting the text, and the graphic to the `ImageView`. Then use `contentDisplay` to configure the position. – James_D Jun 09 '20 at 14:33
  • 1
    Using `VBox` fixed that and now the text appears under each image. but it's not perfectly aligned, How to perfectly align it using `contentDisplay` ? –  Jun 09 '20 at 14:54
  • 3
    `contentDisplay` is for `Label`s, not `VBox`. Just call [`setAlignment(...)`](https://openjfx.io/javadoc/14/javafx.graphics/javafx/scene/layout/VBox.html#setAlignment(javafx.geometry.Pos)) – James_D Jun 09 '20 at 15:12

0 Answers0