Vaadin 14.4.0菜单中Anchor文本未居中对齐的解决方法咨询

问题场景 #

在Vaadin 14.4.0中，给MenuBar的子菜单添加普通文本菜单项（如Item1、Item2）时默认是居中对齐，但直接添加Anchor组件作为菜单项时，该组件会左对齐，需要将其调整为和其他菜单项一致的居中样式。

解决方案 #

方法1：自定义CSS样式实现全局统一 #

1. 在项目的全局CSS文件（如frontend/styles/styles.css）中添加以下样式：

.v-menubar-submenu-item .centered-anchor {
  display: flex;
  justify-content: center;
  width: 100%;
}

2. 在Java代码中为Anchor添加自定义类名：

HorizontalLayout layout = new HorizontalLayout();
layout.setAlignItems(FlexComponent.Alignment.CENTER);
MenuBar menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Menu");
SubMenu subMenu = menuItem.getSubMenu();
subMenu.addItem("Item 1");
subMenu.addItem("Item 2");

// 创建Anchor并添加自定义类
Anchor anchor = new Anchor("https://example.com","ABC");
anchor.addClassName("centered-anchor");
subMenu.addItem(anchor);

layout.add(menuBar);

方法2：用MenuItem包装Anchor并设置对齐 #

通过将Anchor放入MenuItem中，利用MenuItem默认的居中样式：

HorizontalLayout layout = new HorizontalLayout();
layout.setAlignItems(FlexComponent.Alignment.CENTER);
MenuBar menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Menu");
SubMenu subMenu = menuItem.getSubMenu();
subMenu.addItem("Item 1");
subMenu.addItem("Item 2");

// 创建空文本的MenuItem，再将Anchor加入其中
MenuItem anchorMenuItem = subMenu.addItem("");
Anchor anchor = new Anchor("https://example.com","ABC");
anchorMenuItem.add(anchor);
// 强制设置内容居中
anchorMenuItem.getStyle().set("justify-content", "center");

layout.add(menuBar);

方法3：直接设置Anchor的内联样式 #

无需额外CSS文件，直接通过内联样式调整Anchor的布局：

HorizontalLayout layout = new HorizontalLayout();
layout.setAlignItems(FlexComponent.Alignment.CENTER);
MenuBar menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Menu");
SubMenu subMenu = menuItem.getSubMenu();
subMenu.addItem("Item 1");
subMenu.addItem("Item 2");

Anchor anchor = new Anchor("https://example.com","ABC");
// 设置flex布局并居中内容，宽度占满菜单项
anchor.getStyle().set("display", "flex");
anchor.getStyle().set("justify-content", "center");
anchor.getStyle().set("width", "100%");
subMenu.addItem(anchor);

layout.add(menuBar);

原因说明 #

Vaadin的MenuBar子菜单项（.v-menubar-submenu-item）默认使用Flex布局并设置了内容居中，但直接添加的Anchor组件不会自动继承该布局规则。通过上述方法，我们让Anchor组件也使用Flex布局并设置水平居中，同时占满菜单项的宽度，从而和其他文本菜单项的对齐方式保持一致。

内容的提问来源于stack exchange，提问作者David Pham