How do I get my text centered below the image, not adjacent to it?
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?
&l开发者_JAVA技巧t;/a>
</div>
try this css
.HorizontallyCentered
{
text-align: center
}
.HorizontallyCentered img
{
display: block
}
that should force the text on to the line below.
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.
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
}
精彩评论