如何在 Vaadin Flow 中使用 CSS 文本对齐属性？

Question

我不久前开始学习 Vaadin Flow（我了解“核心”Java），但遇到了问题。我在 Vaadin 文档中看到，要设计我们的网页样式，必须进入“frontend/themes/projectName/styles.css”，在我的例子中是“frontend/themes/my-todo/styles.css”。

我尝试更改 Div 元素的背景颜色，它成功了。我还改变了文本的字体，它起作用了。但是当我想使用 CSS 的“text-align: center”时，它不起作用。

我的代码：

MainView.java

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.router.Route;

public class MainView extends VerticalLayout {

    public MainView() {
        VerticalLayout layout = new VerticalLayout();
        Div appHeader = new Div();
        H1 h1 = new H1("Test");
        appHeader.add(h1);
        appHeader.addClassName("app-header");
        add(appHeader);
    }

}

样式.css

html {
    text-align: center;
}

.app-header {
    font-family: "Inter";
    color: red;
    font-size: 50px;
}

Answer 1

您正确应用了

text-align

CSS 属性。您没有说明您希望 UI 在问题中的外观（提示：如果您告诉您想要实现的目标，它可以帮助您获得更好的答案），但我假设您希望 appHeader Div 在屏幕上居中。 根据 MDNtext-align 属性的作用：

text-align CSS 属性设置块元素或表格单元格框中内联级内容的水平对齐方式。

MainView 中的内容不是块元素（或表格单元格框）内的内联级内容。您有一个列向 Flex 容器 (vaadin-vertical-layout)，其中包含一个块元素 (div)，其中包含另一个块元素 (h1)。因此，您希望将块元素在列弹性容器内水平居中。以下是您可以如何使用现有的结构，并且只需对 CSS 进行一处更改：

.app-header {
    font-family: "Inter";
    color: red;
    font-size: 50px;
    margin: 0 auto;
}