Image not center after adding anchor-CodePudding

Im making a portfolio website for school and id like to make the first image in the slideshow clickable but when I wrap an anchor around it the image goes from center to the bottom right of the screen.

<div >
                    <div >
                        <div >
                            <a href="home.html"><img src="images/mlspprojectimage.png"     alt="Machine Learning Stock Picker"></a>
                        </div>
                        <div >
                            <img src="images/AdobeStock_231690594.jpeg" alt="image">
                        </div>
                    </div>
                </div>

.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;
}

CodePudding user response：

I see that your slideshow className wasn't .slideshow

.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 {
    display:flex;
    justify-content:center;
    width: 100%;
    margin: auto;
    overflow: hidden;
    height: 80vh;
}

<div >
  <div >
    <div >
      <a href="/">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCA5N3QZN5XlgXqbsDDDJXBv6QizwUs3YuQX5QWtsTZIquainPKEGmnqcbPCdNpapoegg&usqp=CAU"     
        alt="Machine Learning Stock Picker">
       </a>
     </div>
    <div >
     <a href="/">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9n7nTgLX7gD4EchFzaoC_Wx_rg6xjn11ityF0gKhMXH4wxlGVa4dXYF9tsdKM3Xh1BAA&usqp=CAU" 
      alt="image">
      </a>
    </div>
 </div>
</div>

CodePudding user response：

Fixed it by changing position to relative instead of absolute.

CodePudding user response：

Have you tried creating a flexbox?

  display: flex;
  justify-content: center;