使用Thymeleaf实现图片水平居中失效问题求助

你给.logo设置的justify-content: center不会生效——这个CSS属性是用来控制Flex容器内子元素的水平对齐的，直接作用在图片元素上毫无意义。图片默认是行内块元素，要实现水平居中，得从父容器布局或者自身的块级属性入手。

以下几种修复方式任选其一即可：

方法1：给父容器header设置Flex布局 #

修改CSS，让header成为Flex容器，通过容器属性控制图片居中：

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

header {
    display: flex;
    justify-content: center; /* 控制子元素水平居中 */
    /* 可选：若需要垂直居中，可添加 align-items: center; */
}

/* Styling the logo */
.logo {
    width: 400px;
    height: auto;
}

方法2：给图片设置margin: 0 auto #

将图片转为块级元素，利用块级元素的自动margin特性实现居中：

/* Styling the logo */
.logo {
    width: 400px;
    height: auto;
    display: block; /* 转为块级元素 */
    margin: 0 auto; /* 左右自动分配margin实现水平居中 */
}

方法3：给父容器header设置text-align: center #

利用行内/行内块元素的对齐规则，通过父容器的文本对齐属性控制图片位置：

header {
    text-align: center;
}

/* Styling the logo */
.logo {
    width: 400px;
    height: auto;
}

内容的提问来源于stack exchange，提问作者Nunyet Calçada