如何在Vaadin Flow中正确使用CSS text-align属性？

云原生阿岚

2026-7-1

Vaadin Flow中text-align:center不生效的解决办法

问题分析

你给html标签设置text-align:center未生效，但字体、颜色等样式正常，核心原因有两点：

Vaadin的VerticalLayout默认是flex布局，子元素（你的.app-header Div）默认仅包裹内容宽度，即便html的样式生效，也无法让Div内的内容看起来有居中效果；
Vaadin的默认组件样式优先级高于html标签的全局样式，全局设置的text-align会被组件容器的样式覆盖。

修复方案

方案1：通过CSS直接控制目标元素

修改frontend/themes/my-todo/styles.css，给.app-header添加text-align:center并设置宽度占满父容器：

.app-header {
    font-family: "Inter";
    color: red;
    font-size: 50px;
    text-align: center;
    width: 100%; /* 让Div占满父容器宽度，确保居中效果可见 */
}

方案2：利用Vaadin布局组件的内置对齐属性

因为MainView本身就是VerticalLayout，可以直接在Java代码中设置容器的水平对齐方式，无需额外CSS：

package com.example.application.views.main;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;

@Route("") // 补充@Route注解，确保视图能被访问
public class MainView extends VerticalLayout {

    public MainView() {
        // 设置容器内所有组件水平居中
        setDefaultHorizontalComponentAlignment(Alignment.CENTER);
        
        Div appHeader = new Div();
        H1 h1 = new H1("Test");
        appHeader.add(h1);
        appHeader.addClassName("app-header");
        add(appHeader);
    }
}

注：你之前代码中创建了额外的VerticalLayout但未添加到视图，属于冗余代码，已移除。