如何使用CSS将GridPane中的Text与ToggleButton居中对齐？

我有一个填充了ToggleButton的GridPane，该GridPane的首行和首列存放着Text对象作为标签。我无法通过CSS将Text对象与ToggleButton居中对齐，使文本显示在中间。（已有方案通过GridPane.setHalignment(node, HPos.CENTER);实现此效果）

最小可复现示例（MCVE） #

Java代码：

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class GridTest extends Application {
    private static final int COLS = 5, ROWS = 3;

    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(makeGrid());
        scene.getStylesheets().add(getClass().getResource("GridTest.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    private Pane makeGrid() {
        GridPane grid = new GridPane();
        for(int rowIndex = 0; rowIndex < ROWS ; rowIndex++) {
            Node[] nodes = new Node[COLS];
            Node node;
            for(int colIndex = 0; colIndex < COLS ; colIndex++) {
                if (rowIndex == 0){ //列标题
                    String txt = (colIndex == 0)? " " : String.valueOf(colIndex);
                    node = new Text(txt);
                }else if (colIndex == 0){//行标题
                    node = new Text(String.valueOf(rowIndex));
                }else {
                    node= new ToggleButton();
                }
                nodes[colIndex]= node;
            }
            grid.addRow(rowIndex, nodes);
        }
        return grid;
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

初始CSS代码：

Text{
    -fx-text-alignment: center;
}
GridPane {
    -fx-hpos:center ;
    -fx-hgap: 5;
    -fx-vgap: 5;
    -fx-padding:10;
}
ToggleButton {
    -fx-pref-width:30;
}

问题分析 #

你当前的CSS设置存在两个关键误区：

1. GridPane { -fx-hpos:center; } 是控制GridPane自身在父容器中的水平位置，而非单元格内部元素的对齐方式；
2. Text { -fx-text-alignment: center; } 仅让Text节点内部的文本居中，但Text节点本身在单元格中并未占满宽度，导致视觉上无法与ToggleButton对齐。

解决方案 #

修改CSS代码，直接为GridPane的子节点设置单元格内的对齐规则，并统一Text与ToggleButton的宽度，确保对齐效果一致：

GridPane {
    -fx-hgap: 5;
    -fx-vgap: 5;
    -fx-padding: 10;
}

/* 让GridPane中所有子节点在单元格内水平+垂直居中 */
GridPane > * {
    -fx-halignment: center;
    -fx-valignment: center;
}

ToggleButton {
    -fx-pref-width: 30;
}

/* 让Text节点宽度与ToggleButton一致，保证对齐视觉统一 */
Text {
    -fx-pref-width: 30;
    -fx-text-alignment: center;
}

效果说明 #

• GridPane > * 选择器匹配GridPane下所有直接子节点，通过-fx-halignment: center实现单元格内的水平对齐，这和Java代码GridPane.setHalignment(node, HPos.CENTER)的作用完全一致；
• 为Text设置与ToggleButton相同的-fx-pref-width，能让两类元素的视觉宽度统一，居中效果更协调；
• -fx-valignment: center可选，若需要垂直方向也居中可保留。

这样修改后，Text标签和ToggleButton就能在GridPane的单元格中完美居中对齐了。

内容的提问来源于stack exchange，提问作者c0der