Center tabs in tabpane using CSS

Question

I am trying to center the tabs in a JavaFX TabPane but seem to be unable to achieve the desired result.

Using the CSS reference I am able to target various pieces of the sub-structure of the TabPane control but no matter what I try I am unable to centre the tabs horizontally within the header.

The CSS I have so far is below:

.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;
}

Which gives the following result:

As you can see, the coloured borders show I am correctly selecting the sub-structure of the TabPane but the -fx-alignment property appears to have no effect.

Is it possible to centre the tabs horizontally within the header using CSS and if so which property do I need to set and which part of the sub-structure do I need to target?

Answer 1

Well this not a neat solution, it is more a workaround. Since the sub structure of tabpane consist of stackpanes, these stackpanes align to center by default. But tabs are not aligned to center, which implies there is custom laying out in the skin code. The right solution can be found after reading the tabpane skinning code.

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