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:
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.
Do you mean something like this
I used bootstrap’s
If not can you link to your pen or you can enter code by highlighting it then clicking on the </> in the editor
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.
You can wrap the
<img> in an
<a href="link"><img src="img-source" /></a>
center-block just tells the element to have
margin: 0 auto; what you were doing with the
margin-left: 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 )
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.