Highlighted

How to centre an image that has a link attached

Community Beginner ,
Oct 22, 2020

Copy link to clipboard

Copied

Hi Hive Minds!

I have a simple row of cards and in each card header is a logo and all 3 are centered in each card. They are centered using .mxauto

 

When I add a link to this image it shifts to the left. ????

 

How do I keeo it centered?

 

Thanks lovely people.

 

Joe

 

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.

 

TOPICS
Bootstrap, Code, How to

Views

41

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to centre an image that has a link attached

Community Beginner ,
Oct 22, 2020

Copy link to clipboard

Copied

Hi Hive Minds!

I have a simple row of cards and in each card header is a logo and all 3 are centered in each card. They are centered using .mxauto

 

When I add a link to this image it shifts to the left. ????

 

How do I keeo it centered?

 

Thanks lovely people.

 

Joe

 

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.

 

TOPICS
Bootstrap, Code, How to

Views

42

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 22, 2020 0
LEGEND ,
Oct 22, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2020 0
Community Beginner ,
Oct 22, 2020

Copy link to clipboard

Copied

Thank you. Ill give them a go...

 

Cheers

 

Joe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2020 0
Community Beginner ,
Oct 22, 2020

Copy link to clipboard

Copied

Th simple .d-block added worked. Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2020 0
Adobe Community Professional ,
Oct 22, 2020

Copy link to clipboard

Copied

Before offering an answer, I need to see your HTML markup and where the link occurs.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2020 0