How do I get text to display underneath an <IMG> tag

Question

Let's say you have the following HTML:

<html>
<div style="text-align: center;">
    <img src="http://www.ps.uci.edu/~tomba/ants/sugar.jpg" width="50" height="37" />
    This is some centered text blah blah blah and blah
</div>
</html>

Now you want the text to display under the image, rather than to the right of it. Let's say for some strange reason you can't change the HTML, only the CSS file. One thing you can do is add the "display: block" style to the <img> tag, however if you do that, the image will no longer be centered in the div which you need.

If I could modify the HTML, I could just put a <br /> right after the image (though some say a velociraptor will eat you if you use too many br tags).

Any ideas?

Answer 1

You could make the image display: block; and margin: 0 auto; , like so:

img {
    display: block;
    margin: 0 auto;
}

How do I get text to display underneath an <IMG> tag

Question

1 answers

solution1
6 ACCPTED 2011-03-04 06:50:03

How do I get text to display underneath an <IMG> tag

Question

1 answers

solution1 6 ACCPTED 2011-03-04 06:50:03

solution1
6 ACCPTED 2011-03-04 06:50:03