FXML/CSS: Button with image in center and text in bottom

Question

I have a button with an icon and text and I can't figure out how to place the icon in the center and the text in the bottom left of the button. This is what it looks like right now:

<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>

Two things I've tried, which haven't been working: 1. Giving the ImageView a separate alignment attribute. 2. Placing a VXbox inside the button and the imageView as well as label with text inside the VBox.

Thanks in advance!

James_D · Accepted Answer · 2020-05-20 12:24:45Z

3

The contentDisplay property controls the position of the graphic relative to the text. The alignment property controls the position of the overall content.

So

<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);">

or some similar combination, should work.

If you prefer to set these in CSS, -fx-alignment: bottom-left; -fx-content-display: top ; will do the same.

The contentDisplay property doesn't quite give you full control over the positioning of the graphic; you may need to use the idea you proposed of placing a container with the image view and a label as the graphic. In this case, you probably want an alignment of center. A BorderPane would probably be closer to what you need than a 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>

You may also need to experiment with setting the preferred size of the border pane, to make it fill the area allocated to the button.

edited May 20, 2020 at 12:24

answered May 20, 2020 at 11:56

James_D

211k16 gold badges312 silver badges345 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Varest Over a year ago

Thanks but unfortunately, alignment="CENTER" places the image at the center of the text instead of the very center of the button. Any idea how to fix this?

James_D Over a year ago

@Varest In that case, you probably need to revert to the idea of using a container as the graphic (see update for suggestion). You could also experiment, e.g., with wrapping the image view in a HBox with preferred width and alignment set on the HBox.

Varest Over a year ago

Your second suggestion worked perfectly, thank you very much!

Collectives™ on Stack Overflow

FXML/CSS: Button with image in center and text in bottom

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related