Centering URL links under images

Question

On my webpage, instead of having a written URL link that says a website I want people to go to, I have inserted an image. But, under the image I want to say where the person will be navigated to. I know how to do this, but I don't know how to center the wording so its directly under the image and looks nice and centered.

Answer 1

Tables are always the safest way to go, then set your alignment inside the <td> cell tag:

<table..>

  <tr...>

    <td align="center">

<table>

OR, insert your image and link in a <p> paragraph tag and set the alignment to 'center':

<p align="center"...>IMAGE AND LINK</p>

OR just set the image and link between a <center> tag:

<center>STUFF TO CENTER</center> tags!

Let me know if this help!

Answer 2

You can use CSS:

<style type="text/css">

div.imgHolder {text-align: center; float: left; margin: 5px;}

div.imgHolder img {display: block; margin-bottom: 5px;}

img {border: 0px;}

</style>

Place that in the HEAD tag.

Now place your images:

<div class="imgHolder">

<a href="thewebsite.html"><img src="thepic.jpg" />

The Website's name</a>

</div>

Copy and paste the DIV and the contents as many times as needed, changing the img src, text, and link. They will line up next to each other as long as there is space, otherwise they will drop down.

If your images are not the same height you will have issues. You will need to then figure out how many want across and place an extra bit of code.

If you want 4 across, you'll put 4 DIV containers, followed by this:

<p style="clear: both; margin: 0px;"></p>

This will keep the containers in line.