求助：为何无法实现图片居中？已尝试justify-content等属性无效

问题根源 #

• img 是行内块级元素，margin-left: auto; margin-right: auto; 仅对块级元素生效，单独设置这两个属性不会起作用
• justify-content: center 是Flex容器的属性，直接应用在img元素上没有任何效果

可行解决方法 #

方法1：将图片转为块级元素 #

修改.activities-img的样式，添加display: block，让margin: auto生效：

.activities-img {
    width: 100px; /* 删掉重复的width:100%，后者会覆盖前者 */
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    display: block; /* 关键：转为块级元素 */
}

方法2：给父容器启用Flex布局 #

如果希望多张图片在同一行居中排列，给父容器.activities设置Flex属性：

.activities {
    display: flex;
    justify-content: center; /* 水平居中容器内的元素 */
    gap: 12px; /* 可选：设置图片之间的间距 */
    flex-wrap: wrap; /* 可选：屏幕宽度不足时自动换行 */
}

.activities-img {
    width: 100px;
    height: 100px;
}

方法3：利用父容器的text-align属性 #

由于img属于行内块元素，父容器的text-align: center可以直接让它水平居中：

.activities {
    text-align: center;
}

.activities-img {
    width: 100px;
    height: 100px;
    margin: 0 6px; /* 可选：给图片添加左右间距 */
}

内容的提问来源于stack exchange，提问作者Berkay YILMAZ