How to centre an image that has a link attached

Assuming you are using Bootstrap:

2 ways you can do this, probably more ways, depending on your set up.

1) Add 'd-block' to the class along with 'mx-auto':

<div class="card-header ">

<a href="#"><img src="fruits/apples.jpg" alt="Apples" class="d-block mx-auto"></a>
</div>

2) Just add 'text-center' to the 'card-header' class:

<div class="card-header text-center">
<a href="#"><img src="fruits/apples.jpg" alt="Apples"></a>
</div>

3) Edited: Probably a better solution is to use 'text-center' on the card header and 'd-inline-block mx-auto' on the anchor tag and nothing on the img tag: (see below - then you dont get a link either side of the image when its width is narrower than the card header.

<div class="card-header text-center">
<a href="#" class="d-inline-block mx-auto"><img src="fruits/apples.jpg" alt="Apples"></a>
</div>

4) I'm sure you can do this with flex as well. I dont know all the Bootstrap classes as I dont use it myself but its fairly easy to look them up.

Below is the flex option:

<div class="card-header d-flex justify-content-center">
<a href="#"><img src="fruits/apples.jpg" alt="Apples"></a>
</div>

One of the above solutions should work for you, 3 or 4 would be my suggestion.