text placement relative to img in list item

[KansasCoder]

I'm using xhtml1-strict.dtd and am a css, front-end, newbie.

I am using an unordered list to display some images.

The list items also contain a text label which I would like to appear beneath the image. It is currently appearing to the right of the image.

<li><img id="dogs1"/>Barnabas</li>

The CSS that I'm using for the li is:

#gallery li {
float: left;
  width:240px;
margin-right: 6px;
margin-bottom: 20px;
font: bold 1em Arial, Helvetica, sans-serif;
}

The list is contained within a div, the css for which is:

#body{
padding-bottom:10px;}

Can you tell me what I would need in order to force the text to appear below the images?

Thank you!

[D_Blackwell]

It sounds as though what you want is simply a line break.

<li><img id="dogs1"/>
<br />
Barnabas
</li>
.........................

You can control the presentation by using line-height: on the <li>.

<div>
<ul>
<li style="line-height: 5em; list-style-type: none;">
<img src="aaa.jpg" alt="Description." />
<br />
TEXT
</li>
</ul>
</div>
.........................

A <dl> may also be an appropriate option.

[swa66]

You can probably set the img to display as a block instead of inline.