使用CSS在tabpane中使用CSS的中間選項卡

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的子結構由堆棧窗格組成，因此這些堆棧窗格默認對齊到中心。但是製表符不與中心對齊，這意味着在皮膚代碼中存在自定義佈局。閱讀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); 
    } 
});