Java 瓦丁14时间选择器-居中对齐

与Vaadin 14（.1.19）一起提供的是这次选择器组件：

这是它的样子（当它是只读的）：

我如何让这个时间选择器像这样显示以时间为中心的时间（这是浏览器中手动操作的屏幕截图（将文本对齐：直接在嵌入式输入字段中设置为中心），而不是编程解决方案）

我试图在Java代码中设置text align属性，但没有效果：

TimePicker timepicker = new TimePicker();
timepicker.getElement().getStyle().set("text-align", "center");

我搜索了一个主题变体。但这似乎只适用于文本字段和派生字段：

EmailField emailFeld = new EmailField();
emailFeld.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

---

您将需要更改

TimePicker

的

TextField

值部分的阴影DOM中的CSS，我们使用主题属性作为附加选择器，以避免对所有文本字段设置主题：

[part="value"] {
    :host([theme~="center"]) text-align: center;
}

通过

@CssImport

注释包含CSS，为文本字段设置主题，并将主题属性设置为日期选择器。主题属性将传播到日期选择器中使用的文本字段：

@CssImport（value=“./styles/my time picker styles.css”，themeFor=“vaadin time picker text field”）
公共类YourViewOrLayout扩展了复合{
...
timePicker.getElement（）.setAttribute（“主题”、“中心”）；
}

---

我在中详细解释了一下。

嗨，Steffen，嗨，Tatu，谢谢你们！它有两个修改：首先，我交换了“themeFor”的值：@CssImport（value=“./styles/time picker styles.css”，themeFor=“vaadin time picker text field”）。我还尝试了“vaadin文本字段”和“vaadin时间选择器”。但对于“vaadin时间选择器”，浏览器将样式属性放置在阴影根中的位置过高。第二，我删除了“主机（[theme~=“center”]”）。我也试着把它移到支架外面，但那根本没有（可见的）影响。是的，这样所有时间选择器都居中。这对我来说没问题。是的，你是对的，它应该是“瓦丁时间选择器文本字段”。关于“主题”，我甚至不确定这是否是有效的CSS。也许@Tatu（编辑）可以指出这一点？我想

：host（[theme~=“center”]）[part=“value”]{text align:center；}

应该可以工作。不，这不起作用。vaadin时间选择器元素具有attribute theme=“center”。在瓦丁时间选择器元素的阴影根中有一个瓦丁组合框轻元素。其中有一个vaadin时间选择器文本字段元素。在其阴影根中有一个样式元素：host（[theme~=“center”]）[part=“value”]{text align:center；}”，还有一个slot元素，其中包含输入。所以CSS选择器必须是“：host[…]：host[…]”或类似的东西——我不知道。但不管怎样，你的回答帮助了我。：-）