The problem is this: why is the a tag larger than the picture? Shouldn't he occupy the height of the content? The screenshot shows that it is a couple more pixels, how to get rid of it without specifying max-height & height ?

Code:

 .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } a { display: block; } 
 <div class="container"> <a href="#"> <img src="https://picsum.photos/200/300" alt="#"> </a> </div>

enter image description here

    2 answers 2

    add image display: block . Images are inline-elements, so they seem to have a place for speakers of elements below. To remove - you need to make a block element.

     .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } a { display: block; background: #f0f; } a img { display: block; } 
     <div class="container"> <a href="#"> <img src="https://picsum.photos/50/100" alt="#"> </a> </div>

    • damn it!) a little bit of a bit of another. Or are you male? - Vladimir Rodichev pm

    In your case, to solve the problem in a couple of pixels, it is enough for a to expose display: flex; or display: grid;

     .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } a { display: block; } .container a { display: grid; } 
     <div class="container"> <a href="#"> <img src="https://picsum.photos/200/300" alt="#"> </a> </div>