Javascript 为什么我的图像在使用锚定标记时变得不对齐？

我不熟悉HTML和CSS，但我就是搞不懂这一点。我成功地将三幅图像水平对齐，使它们在网页上舒适地并排放置。它们的大小也都符合我的需要。但是，我正在尝试将Lightbox脚本与它们一起使用（允许您在弹出窗口中查看图像），为此，需要将图像标签包装在

.影像中心{
证明内容：中心；
右边距：10px；
左边距：10px；
页边顶部：自动；
页边距底部：自动；
垂直对齐：中间对齐；
显示：内联；
}
.imagecont{
宽度：50%；
高度：自动；
显示器：flex；
证明内容：中心；
右边距：自动；
左边距：自动；
边缘顶端：40px；
边缘底部：40px；
}

您也可以简单地在锚标记上使用CSS

img a { adjust spacing as needed }

或者让它成为这些元素的特殊类

img a.anchorimage { adjust spacing as needed }

或者更好的方法是，在进行任何样式设置之前，先使用重置样式表

---

当您将图像包装在

a

标记中时，

a

标记现在成为图像之前的柔性项（即柔性容器

.imagecont

div的子项），图像成为

a

标记的子项。因此，您必须将所需的尺寸、对齐方式等应用于

a

标记，并制作与

a

标记相关的图像，例如

高度：100%

img a.anchorimage { adjust spacing as needed }