使用CSS在tabpane中居中选项卡

Question

我试图将标签置于JavaFX TabPane的中心，但似乎无法达到预期的结果。

使用CSS引用我可以定位TabPane控件的子结构的各个部分，但无论我尝试什么，我都无法将标签水平居中于标题内。

我到目前为止的CSS如下：

.tab-pane > .tab-header-area > .headers-region {
    -fx-border-color: red;
    -fx-border-width: 3;

    -fx-alignment: CENTER;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-border-color: blue;
    -fx-border-width: 3;
}

这给出了以下结果：

如您所见，彩色边框显示我正确选择了TabPane的子结构，但-fx-alignment属性似乎没有效果。

是否可以使用CSS在标题中水平居中标签，如果是，我需要设置哪个属性以及我需要定位哪个子结构部分？

Answer 1

这不是一个简洁的解决方案，它更像是一种解决方法。由于tabpane的子结构由stackpanes组成，因此默认情况下这些stackpanes对齐到center。但是标签没有与中心对齐，这意味着皮肤代码中存在自定义布局。在阅读tabpane皮肤代码后，可以找到正确的解决方案。

Platform.runLater(new Runnable() {

    @Override
    public void run() {
        final StackPane region = (StackPane) tabPane.lookup(".headers-region");
        final StackPane regionTop = (StackPane) tabPane.lookup(".tab-pane:top *.tab-header-area");
        regionTop.widthProperty().addListener(new ChangeListener<Number>() {

            @Override
            public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
                Insets in = regionTop.getPadding();
                regionTop.setPadding(new Insets(
                        in.getTop(),
                        in.getRight(),
                        in.getBottom(),
                        arg2.doubleValue() / 2 - region.getWidth() / 2));
            }
        });
        // force re-layout so the tabs aligned to center at initial state
        stage.setWidth(stage.getWidth() + 1);
    }
});