使用CSS将GridPane中的子项居中 [英] Center children in GridPane using CSS

问题描述

我有一个用ToggleButtons填充的GridPane. GridPane中的第一行和第一列保存Text对象标签.
我无法将Text对象与ToggleButton居中对齐，因此文本会出现在中间，使用CSS .
(此答案显示了如何使用GridPane.setHalignment(node, HPos.CENTER);来实现它.)

I have a GridPane populated with ToggleButtons. First row and column in that GridPane holds Text object labels.
I am unable to center the Text objects with the ToggleButtons so the text appears in the middle, using css.
(This answer shows how to achieve it by using GridPane.setHalignment(node, HPos.CENTER);).

MCVE(如果需要):

MCVE if needed :

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){ //col header;
                    String txt =  (colIndex == 0) ?
                            " " : String.valueOf(colIndex);
                    node = new Text(txt);
                }else if (colIndex == 0){//row header
                    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:

CSS:

Text{
    -fx-text-alignment: center;
}

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

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

推荐答案

基于@ James_D和@fabian发表的评论以及先前的答案，有两种方法可以使文本标签居中.
如问题中所述，一个选项不使用css.它需要对makeGrid:

Based on the comments posted by @ James_D and @fabian and previous answers there are two options to get the text labels centered.
One option, as posted in the question, does not use css. It requires slight modification of the makeGrid:

//see: https://stackoverflow.com/a/35438985/3992939
GridPane.setHalignment(node, HPos.CENTER);  //added line
nodes[colIndex]= node;

此解决方案不会更改(不可调整大小的)Text.它简单地将其居中在其GridPane父列中.

This solutions does not change the (non resizable) Text. It simple centers it within its GridPane parent column.

另一种选择涉及将Text标签更改为Labels:

The other option involves changing the Text lables to Labels :

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){ //col header;
                String txt =  (colIndex == 0) ? " " : String.valueOf(colIndex);
                node = new Label(txt);                      //** changed 
            }else if (colIndex == 0){//row header
                node = new Label(String.valueOf(rowIndex)); //** changed 
            }else {
                node= new ToggleButton();
            }
            nodes[colIndex]= node;
        }
        grid.addRow(rowIndex, nodes);
    }
    return grid;
}

并使用css(或其他代码)将标签的宽度设置为最大并使文本居中:

And using css (or additional code) to set the label's width to maximum and center the text :

GridPane .label{
    -fx-alignment: center;
    -fx-max-width: Infinity;
}

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

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

这篇关于使用CSS将GridPane中的子项居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！