Stuck with Image Link

Code Feedback
1

Hi,

I’m trying to take an image and turn it into a link. I’ve got the image showing and at the size I want, however, I can’t seem to get the image to center (even though I’ve used the class=“center-block” like everything I read on the web said to), and I’m stumped how to do the link. I tried to put in the html code here, but it shows you the image, rather than the code. So, first question is, how can I put the code in here without it turning into the image I’m having trouble with. Here’s the html code I’ve used so far (nice image, huh?!):

Here’s the css that pertains to this:
.notes {
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;

}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

Any help would be greatly appreciated. My page is done except for the link, which I could just put in a simple link, but I really wanted an image link.

Thanks, Sadaajit

1 Like
2

Hi,

Do you mean something like this

I used bootstrap’s text-center class

If not can you link to your pen or you can enter code by highlighting it then clicking on the </> in the editor

.notes {
height: auto; 
width: auto; 
max-width: 100px; 
max-height: 100px;

}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
3

Yes that is the code, except for your change to text-center. I tried the text-center and it worked perfectly, weird. Thanks for the tip on making it show when I want to post it. So, what is wrong with my link?

From what I had read text-center is for text, block-center for images. Maybe I need to turn it around to center-block… Well I’ll leave well enough alone, it is centered now. Now to get it to be a link.

Thanks, Sadaajit

4

You can wrap the <img> in an <a>

<a href="link"><img src="img-source" /></a>

The center-block just tells the element to have margin: 0 auto; what you were doing with the margin-left: auto; & margin-right: auto;

The parent element needs CSS text-align: center; or HTML text-center class to actually align it.

Also it’s best not to change bootstrap (or other framework) classes in CSS because if your making a large site and use the bootstrap class you changed somewhere else you might get unexpected results, then spend ages trying to find out why (I know I found out that way :confounded: )

5

Thank you sooooo much madetotry. Everything is working perfectly now. I think I’ve got a pretty nice tribute page ready to submit. Here’s the link to my code pen page - https://codepen.io/Sadaajit/pen/gMMKbW. I’ll put it up for everyone to comment on, as I want to learn as much as I can about good coding and good web design.