In JavaFX how do i set label alignment inside a tab? - javafx

Question

It is graphic+text inside tabs.
The TabPane is made in the fxml :
<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" rotateGraphic="true" side="LEFT" stylesheets="#Scene1.css" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="vues.Scene1Controller">
<tabs>
<Tab fx:id="tab111" text="Text1">
<graphic>
<ImageView>
<image>
<Image url="#face.png" />
</image>
</ImageView>
</graphic>
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Button fx:id="but111" layoutX="91.0" layoutY="64.0" mnemonicParsing="false" onAction="#but111Action" text="Button" />
</children></AnchorPane>
</content>
</Tab>
<Tab text="Text222222222222222222">
<graphic>
<ImageView>
<image>
<Image url="#face.png" />
</image>
</ImageView>
</graphic>
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
</tabs>
</TabPane>
and some css :
.tab-pane {
-fx-tab-min-width:300px;
-fx-tab-max-width:300px;
-fx-tab-min-height:300px;
-fx-tab-max-height:300px;
}
.tab *.tab-label {
-fx-rotate: 90;
/* -fx-content-display: left; */
/* -fx-padding: 0 0 0 -60; */
/* -fx-translate-y: -100; */
/* -fx-graphic-text-gap: 30px; */
/* -fx-layout-y: 150; */
}
.tab-pane > .tab-header-area > .headers-region > .tab:hover > .tab-container > .tab-label {
-fx-text-fill: red;
-fx-graphic: url("face33.png");
}
And the result is this :
Now my problem is that i want that aligned left, but the pick point of this, lets say, label, is center, so if i translate this to left with fixed value, they will not be aligned to left, but from center (using "-fx-translate-y: -150;" (height of 300 / 2)), and here is the result :
I cant use a custom translate value for each, because the text will be variable.