代码之家 › 专栏 › 技术社区 › Nuñito Calzada

以百里香为图像水平居中

thymeleaf css html

Nuñito Calzada · 技术社区 · 2 年前

我有这个css:

/* Global CSS styles */
body {
    background-color: #364f6b;
    margin: 0;
    padding: 0;
}

/* Styling the logo */
.logo {
    width: 400px;
    height: auto;
    justify-content: center; /* Horizontally center the content */
}

以及此模板:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    
    <!-- Menu -->
    <link id="themeLink" th:href="@{/css/mystic-planets.css}"  rel="stylesheet" />
    <meta name="format-detection" content="telephone=no">

</head>
<body>
<header>
    <img th:src="@{/images/137364472_padded_logo.png}"  alt="mystic-planets" th:class="logo" />
    <!-- Other header content goes here -->
</header>
</body>
</html>

但是徽标出现在页面的左上角

2 回复 | 直到 2 年前

Daham Akl 2 年前

justify-content
justify-item

这些属性是CSS flex布局的子部分。要使用这些属性,您需要首先调整布局。

  {
     display: flex;
     flex-direction: column;
  }

不要忘记使用灵活方向的行或列。最后,您可以使用对正内容和对正项属性。

看看下面的例子,

div {
  display: flex;
  justify-content: center;
  justify-items: center;
}

希望这对你有帮助。

-1

ByMunajat 2 年前

要使用Thymelaf和CSS水平居中图像,可以使用flexbox。这个 justify-content: center

CSS格式:

/* Styling the logo container */
.logo-container {
    display: flex; 
    justify-content: center; 
    align-items: center;
    height: 100vh; 
}

推荐文章

crystopher cr · 无法使用js获取输入值

3 年前

Mohammed Haydar · 如何在另一个html页面中访问spring模型的数据?

3 年前

Matvey Androsyuk · th:选中引发异常

3 年前

PewPhon · Thymeleaf如何使用选择输入将对象发送到控制器

3 年前

Natalia · 从thymeleaf中获取变量的访问权限,并根据变量的值更改表中每一行的颜色

3 年前

FeliksB · 如何将页面与控制器连接

3 年前

sagar limbu · 无法访问区域设置消息

7 年前

Halil · Spring MVC-有条件返回html内容或模板内容

7 年前

Maciaz · 2个概要文件,2个方法实现,1个通过Thymeleaf调用html文件。怎样

7 年前

pioto · Thymeleaf文本模板中的文字[]

7 年前