51工具盒子英文:
CSS Centered Width Styling in Vaadin Theme - Java
问题 {#heading}
I have a weird behavior that I can not explain to myself. Could anyone explain this to me?
我有一个奇怪的行为，我无法解释给自己。有人能解释一下吗？
I would like to have a Horizontal Layout of width:80% and it contains buttons and they should be also centered. But It comes out weird. I decided to include the HTML code with .css - Let me know if you need the Java/Vaadin code as well. But I think that .CSS should dictate everything here.
我想要一个宽度为80%的水平布局，其中包含按钮，它们也应该居中。但是它看起来很奇怪。我决定将HTML代码和.css包括在内 - 如果您还需要Java/Vaadin代码，请告诉我。但我认为.css应该在这里决定一切。
And what I want to achieve is this:
而我想要实现的是这样的：
With the .HTML code:
使用.HTML代码：
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div style="width: 80%;">
<div style="display: flex; justify-content: center;">
<button style="width: 30%;">Button 1</button>
<button style="width: 30%;">Button 2</button>
<button style="width: 30%;">Button 3</button>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div style="width: 80%;">
<div style="display: flex; justify-content: center;">
<button style="width: 30%;">Button 1</button>
<button style="width: 30%;">Button 2</button>
<button style="width: 30%;">Button 3</button>
</div>
</div>
</div>
</body>
</html>
英文:
I have a weird behavior that I can not explain to myself. Could anyone explain this to me?
I would like to have a Horizontal Layout of width:80% and it contains buttons and they should be also centered. But It comes out weird. I decided to include the HTML code with .css - Let me know if you need the Java/Vaadin code as well. But I think that .CSS should dictate everything here.
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route(\"\")
public class TestView extends VerticalLayout {
public TestView() {
Button test = new Button(&quot;Test&quot;);
test.setWidth(&quot;30%&quot;);
Button test1 = new Button(&quot;Test&quot;);
test1.setWidth(&quot;30%&quot;);
Button test2 = new Button(&quot;Test&quot;);
test2.setWidth(&quot;30%&quot;);
HorizontalLayout horizontalLayout = new HorizontalLayout(test, test1, test2);
horizontalLayout.setAlignItems(Alignment.CENTER);
horizontalLayout.setWidth(&quot;80%&quot;);
add(horizontalLayout);
// Center the view content on the page
setSizeFull();
// setJustifyContentMode(JustifyContentMode.CENTER);
setAlignItems(Alignment.CENTER);
}
}
hopefully the thing works, when you try it at your end?
(this one has even some extra orange space):
And probably you will also need the pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<!-- Project from https://start.vaadin.com/ -->
<groupId>com.example.application</groupId>
<artifactId>flowcrmtutorial</artifactId>
<name>flowcrmtutorial</name>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>
\<properties\>
\<java.version\>17\</java.version\>
\<vaadin.version\>24.1.4\</vaadin.version\>
\<selenium.version\>4.10.0\</selenium.version\>
\</properties\>
\<parent\>
\<groupId\>org.springframework.boot\</groupId\>
\<artifactId\>spring-boot-starter-parent\</artifactId\>
\<version\>3.1.0\</version\>
\</parent\>
\<repositories\>
\<repository\>
\<id\>Vaadin Directory\</id\>
\<url\>https://maven.vaadin.com/vaadin-addons\</url\>
\<snapshots\>
\<enabled\>false\</enabled\>
\</snapshots\>
\</repository\>
\</repositories\>
\<dependencyManagement\>
\<dependencies\>
\<dependency\>
\<groupId\>com.vaadin\</groupId\>
\<artifactId\>vaadin-bom\</artifactId\>
\<version\>${vaadin.version}\</version\>
\<type\>pom\</type\>
\<scope\>import\</scope\>
\</dependency\>
\</dependencies\>
\</dependencyManagement\>
\<dependencies\>
\<dependency\>
\<groupId\>com.vaadin\</groupId\>
\<!-- Replace artifactId with vaadin-core to use only free components --\>
\<artifactId\>vaadin\</artifactId\>
\</dependency\>
\<dependency\>
\<groupId\>com.vaadin\</groupId\>
\<artifactId\>vaadin-spring-boot-starter\</artifactId\>
\</dependency\>
\<dependency\>
\<groupId\>org.parttio\</groupId\>
\<artifactId\>line-awesome\</artifactId\>
\<version\>1.1.0\</version\>
\</dependency\>
&lt;dependency&gt;
&lt;groupId&gt;com.h2database&lt;/groupId&gt;
&lt;artifactId&gt;h2&lt;/artifactId&gt;
&lt;scope&gt;runtime&lt;/scope&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
&lt;artifactId&gt;spring-boot-starter-data-jpa&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
&lt;artifactId&gt;spring-boot-starter-validation&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
&lt;artifactId&gt;spring-boot-devtools&lt;/artifactId&gt;
&lt;optional&gt;true&lt;/optional&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
&lt;artifactId&gt;spring-boot-starter-test&lt;/artifactId&gt;
&lt;scope&gt;test&lt;/scope&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
&lt;groupId&gt;com.vaadin&lt;/groupId&gt;
&lt;artifactId&gt;vaadin-testbench-junit5&lt;/artifactId&gt;
&lt;scope&gt;test&lt;/scope&gt;
&lt;/dependency&gt;
\</dependencies\>
\<build\>
\<defaultGoal\>spring-boot:run\</defaultGoal\>
\<plugins\>
\<plugin\>
\<groupId\>org.springframework.boot\</groupId\>
\<artifactId\>spring-boot-maven-plugin\</artifactId\>
\<configuration\>
\<jvmArguments\>-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5719\</jvmArguments\>
\<wait\>500\</wait\>
\<maxAttempts\>240\</maxAttempts\>
\</configuration\>
\</plugin\>
&lt;plugin&gt;
&lt;groupId&gt;com.vaadin&lt;/groupId&gt;
&lt;artifactId&gt;vaadin-maven-plugin&lt;/artifactId&gt;
&lt;version&gt;${vaadin.version}&lt;/version&gt;
&lt;executions&gt;
&lt;execution&gt;
&lt;goals&gt;
&lt;goal&gt;prepare-frontend&lt;/goal&gt;
&lt;/goals&gt;
&lt;/execution&gt;
&lt;/executions&gt;
&lt;/plugin&gt;
&lt;/plugins&gt;
\</build\>
\</project\>
And what I want to achieve is this:
With the .HTML code:
<html>
<head>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div style="width: 80%;">
<div style="display: flex; justify-content: center;">
<button style="width: 30%;">Button 1</button>
<button style="width: 30%;">Button 2</button>
<button style="width: 30%;">Button 3</button>
</div>
</div>
</div>
</body>
</html>
答案1 {#1}
得分: 2
以下是已翻译的内容：
空白区域（或如浏览器检查器所示的紫色区域）在布局中的原因是其内容被左对齐（默认），而不是水平居中。
如文档所示（https://vaadin.com/docs/latest/components/horizontal-layout#horizontal-alignment），这是通过 setJustifyContentMode(JustifyContentMode.CENTER) 配置的。
（在 HorizontalLayout 和 VerticalLayout 中设置水平和垂直对齐的 API 是"正交的"，因为它遵循与 FlexBox 模型相同的方式。我的意思是，在 HorizontalLayout 中，垂直对齐是使用 setAlignItems 设置的，而水平对齐称为"justification"，并使用 setJustifyContentMode 设置，而在 VerticalLayout 中则相反。背后的原理是，"justification" 表示布局的"主"或"方向性"轴，而"alignment" 表示"横跨"方向轴，跨越方向轴。）
英文:
The reason for the empty (or purple, as shown by the browser's inspector) area in the layout is that its contents are left-aligned (the default) rather than horizontally centered.
As shown in the documentation
(https://vaadin.com/docs/latest/components/horizontal-layout#horizontal-alignment), this is configured with setJustifyContentMode(JustifyContentMode.CENTER).
(The API for setting horizontal and vertical alignment in HorizontalLayout and VerticalLayout are "orthogonal" to each other, because it follows the FlexBox model that works the same way. What I mean by this is that in HorizontalLayout, vertical alignment is set with setAlignItems and the horizontal alignment is called "justification" and set with setJustifyContentMode, whereas in VerticalLayout it's the other way around. The rationale behind this is that "justification" denotes the layout's "main" or "directional" axis, while "alignment" denotes the "cross axis" that goes "across" the directional axis.)
