JavaFX中如何设置Tab内图文标签的左对齐？

问题背景 #

通过FXML创建了左侧布局的TabPane，每个Tab包含ImageView图形与文本内容，已通过CSS将文本旋转90度。由于Tab文本长度不一致，使用固定-fx-translate-y偏移无法实现所有标签的统一左对齐，需调整布局逻辑实现自适应对齐效果。

解决方案 #

核心思路是修改Tab标签容器的对齐规则，让旋转后的图文内容始终靠左排列，替代默认的居中布局。通过以下CSS调整即可实现：

修改后的完整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 .tab-container {
    -fx-alignment: CENTER_LEFT;
    -fx-padding: 0 10px; /* 可选：添加内边距避免内容贴边 */
}

.tab *.tab-label {
    -fx-rotate: 90;
    -fx-content-display: TOP; /* 旋转后图形自动居左、文本居右 */
    -fx-graphic-text-gap: 8px; /* 控制图形与文本的间距 */
    -fx-alignment: CENTER_LEFT; /* 标签内部元素靠左对齐 */
    -fx-translate-x: 0; /* 清除之前的固定偏移 */
    -fx-translate-y: 0;
}

/* 保留hover效果 */
.tab-pane > .tab-header-area > .headers-region > .tab:hover > .tab-container > .tab-label {
    -fx-text-fill: red;
    -fx-graphic: url("face33.png");
}

关键属性说明 #

• .tab .tab-container设置-fx-alignment: CENTER_LEFT：这是核心调整，Tab的容器默认是居中对齐，改为靠左后，无论文本长度如何，标签内容都会从左侧起始位置排列。
• .tab-label的-fx-content-display: TOP：旋转90度后，原本的上下布局会转为左右布局，确保图形在左、文本在右，且整体保持靠左对齐。
• 重置-fx-translate-x/-fx-translate-y：清除之前尝试的固定偏移值，避免干扰新的布局逻辑。

可选优化 #

如果需要让旋转后的文本更贴合Tab左侧，可调整.tab-container的内边距：

.tab .tab-container {
    -fx-alignment: CENTER_LEFT;
    -fx-padding: 0 0 0 20px; /* 左侧内边距，根据视觉需求调整数值 */
}

调整后，无论Tab文本是短的Text1还是长的Text222222222222222222，旋转后的图文标签都会统一靠左对齐，不会因文本长度差异出现错位。

内容的提问来源于stack exchange，提问作者Mike More