How do I get my text centered below the image, not adjacent to it?

Question

In the HTML markup below, what do I need to do in order to get the text, "What is this?" to be positioned BELOW the image? Initially, I placed the text in <p> tags but, although the text was positioned correclty, I lost my desired hyperlink behavior.

Thanks!

<div class="HorizontallyCentered"> 
    <a href="qr.aspx">
        <img alt="Image of JA10" src="files/ja10.png" height="150" width="150" />
        What is this?
    </a>
</div>

Answer 1

The most reliable way to do this is to simply use the <br /> tag, however HTML/CSS purists would recommend that you set the class HorizontallyCentered to be the same width as the ja10.png as using the <br /> tag to create spacing is not considered ideal.

Answer 2

try this css

.HorizontallyCentered 
{
    text-align: center   
}
.HorizontallyCentered img
{
  display: block
}

that should force the text on to the line below.

Answer 3

Without testing, and kind of redundant code im pretty sure this will do the work:

HTML:

<div class="HorizontallyCentered"> 
    <a href="qr.aspx">
        <img alt="Image of JA10" src="files/ja10.png" height="150" width="150" />
        <span>What is this?</span>
    </a>
</div>

CSS:

.HorizontallyCentered {
  text-align: center; 
}
.HorizontallyCentered img {
  display: block
}
.HorizontallyCentered span {
  text-align:center
}