Javafx GridPane，如何居中居中？ （文本/标签）

Question

I am trying to learn Javafx for a class I am taking. I am having a lot of difficulty transitioning from HTML + ERB templates to the Javafx framework (I am a Rails dev).

For some reason I am unable to center a Label node in a gridpane. Here is my start method:

@Override
    public void start(Stage stage) throws Exception {
        GridPane root = new GridPane();
        FlowPane leftbanner = new FlowPane();

        leftbanner.setPrefWidth(200);
        String bgStyle = "-fx-background-color: lightblue;"
                         + "-fx-background-radius: 0%;"
                         + "-fx-background-inset: 5px;";
        leftbanner.setStyle(bgStyle);

        root.add(leftbanner, 0, 0, 1, 1);
        root.add(createGridPane(), 1, 0, 1, 1);

        Scene scene = new Scene(root, 700, 500);
        stage.setTitle("Recommendify");
        stage.setScene(scene);
        stage.show();
    }

I am using the createGridPane method to build my app. Here are the contents of that method which includes my attempts to center the label:

public GridPane createGridPane() {
        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10));
        grid.setHgap(10);
        grid.setVgap(10);

        Text txt = new Text("Recommendify");
        txt.setFont(Font.font("Dialog", FontWeight.BOLD, 12));
        GridPane.setHalignment(txt, HPos.CENTER);

        grid.add(txt, 0, 0, 1, 1);
        grid.add(new Separator(), 0, 1, 3, 1);

        return grid;
}

I have also tried these solutions posted here: JavaFX alignment of Label in GridPane

Do I need to throw this Label node into a container in order to center it in the GridPane? Like an HBox or VBox?

Answer 1

There is actually nothing wrong with your code. The "Recommendify" text is centered in its cell. However, the cell is no wider than the text itself.

You can see this by turning on the grid lines within your createGridPane() method:

grid.setGridLinesVisible(true);

---

To test the alignment, you can add ColumnConstraints to the GridPane :

grid.getColumnConstraints().add(new ColumnConstraints(150));

The above statement sets the preferred width of the first column to 150 . Here is the new result:

As you can see, the Text node is centered properly.

EDIT: Keep in mind that if you want your Text to be centered over the Separator you've added to the second row, you need to have it span 3 columns as well.