HTML + CSS - Centering Images With Hyperlinks

Question

So I have two images with hyperlinks and when I try to center them, they act funny so I thought huh, maybe the dimensions of the elements are... distorted? Somehow? So I add a border around the elements and sure enough, the sizes of them look like this:

https://gyazo.com/f5a91e1a26eaf3aea6208ffa2eea698c

HTML:

<a id="home-invite-button" href="https://url.com" target="_blank"><img 
src="Images/Invite Button.png"></a>
<a id="home-wiki-button" href="https://url.com" target="_blank"><img 
src="Images/Wiki Button.png"></a>

CSS:

#home-invite-button {
  position: absolute;
  top: 540px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  width: 50%;
  border: thin black solid;
}

#home-wiki-button {
  position: absolute;
  top: 630px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  width: 50%;
  border: thin black solid;
}

So the question is, how can I make the actual size of the elements the same as the actual image? Thanks so much!

score 1 · Accepted Answer · answered Oct 21 '17 at 05:08

1

Avoid assigning the width to your images, instead wrap the <a> tags inside a div content-holder and then apply the positioning to the holder. The images will remain intact.

Have a look at the snippet below:

.content-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: thin black solid;
}

#home-invite-button {
  display: flex;
  border: 1px solid red;
}

#home-wiki-button {
  display: flex;
  border: 1px solid red;
}

<div class="content-holder">
  <a id="home-invite-button" href="https://url.com" target="_blank"><img 
  src="http://placehold.it/100x100"></a>
  <a id="home-wiki-button" href="https://url.com" target="_blank"><img 
  src="http://placehold.it/100x100"></a>
</div>

Hope this is what you are trying to achieve.

answered Oct 21 '17 at 05:08

Saurav Rastogi

9,575
3
29
41

Thank you so much, this worked! I also learned that the width thing isn't actually the way to go. Overall, great answer :) – APixel Visuals Oct 21 '17 at 05:18
It's my pleasure. Please also upvote it, if you find this answer useful. – Saurav Rastogi Oct 21 '17 at 05:25
hehe yeah I need 15 rep first :P – APixel Visuals Oct 21 '17 at 15:08

score 0 · Answer 2 · answered Oct 21 '17 at 05:04

0

you can try this code

a img {
    display: block;
    margin: 0 auto;

}

if You also see this Link: JSfiddle

answered Oct 21 '17 at 05:04

Md. Abu Sayed

2,396
2
18
26

I've tried this just now and it doesn't fix the issue. – APixel Visuals Oct 21 '17 at 05:06
When Center your link then Sure your Links Wrapper example: https://jsfiddle.net/sayed021/tpnoztx6/1/ – Md. Abu Sayed Oct 21 '17 at 05:36

HTML + CSS - Centering Images With Hyperlinks

2 Answers2