为幻灯片图片添加<a>标签后图片偏移至右下角的问题求助

我正在为学校制作一个作品集网站，想把幻灯片里的第一张图片设为可点击状态，但用<a>标签包裹图片后，图片从居中位置偏移到了屏幕右下角。

现有代码 #

HTML #

<div class="col-12 p-0 m-0">
    <div class="slideshow">
        <div class="programming-slides">
            <a href="home.html"><img src="images/mlspprojectimage.png" alt="Machine Learning Stock Picker"></a>
        </div>
        <div class="programming-slides">
            <img src="images/AdobeStock_231690594.jpeg" alt="image">
        </div>
    </div>
</div>

CSS #

.business-slides img, .programming-slides img, .webdesign-slides img, .architecture-slides img {
    width: auto;
    max-height: 70vh;
    position: absolute;
    margin: auto;
    pointer-events: auto;
    border-radius: 6px;
}

.business-slides a, .programming-slides a, .webdesign-slides a, .architecture-slides a {
    width: auto;
    max-height: 70vh;
    position: absolute;
    margin: auto;
    pointer-events: auto;
    border-radius: 6px;
}

.slideshow {
    width: 95%;
    margin: auto;
    overflow: hidden;
    height: 80vh;
}

解决方案 #

问题根源是<a>标签的绝对定位与图片的绝对定位冲突，且图片的居中逻辑不完整。按以下步骤修改：

1. 移除<a>标签的绝对定位
   删掉.business-slides a等选择器里的position: absolute，让<a>自适应图片尺寸，不要干扰定位：

   .business-slides a, .programming-slides a, .webdesign-slides a, .architecture-slides a {
       width: auto;
       max-height: 70vh;
       /* 删掉position: absolute */
       pointer-events: auto;
       border-radius: 6px;
   }
   

2. 补全图片的居中属性
   绝对定位元素仅靠margin: auto无法居中，需添加四个方向的定位值：

   .business-slides img, .programming-slides img, .webdesign-slides img, .architecture-slides img {
       width: auto;
       max-height: 70vh;
       position: absolute;
       /* 添加四个方向定位，配合margin:auto实现居中 */
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
       pointer-events: auto;
       border-radius: 6px;
   }
   

3. 给幻灯片容器设置相对定位
   让绝对定位的图片以.programming-slides为定位上下文，避免相对于页面偏移：

   .programming-slides, .business-slides, .webdesign-slides, .architecture-slides {
       position: relative;
       width: 100%;
       height: 100%;
   }
   

修改后，<a>标签仅负责包裹图片提供跳转，不会破坏原有居中布局，图片也能保持可点击状态。

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