Adding title below photo

I'm displaying some photos on website. I want to add a photo title below each photo. I tried many ways but it still doesn't work. This is html and css:

<div id="albumListContent">
<img id="a42" class="albumImg" width="150px" alt="not found" src="photo_with_any_size.jpg">
<img id="a56" class="albumImg" width="150px" alt="not found" src="photo_with_any_size.jpg">
<img id="a59" class="albumImg" width="150px" alt="not found" src="photo_with_any_size.jpg">
<img id="a62" class="albumImg" width="150px" alt="not found" src="photo_with_any_size.jpg">
<img id="a63" class="albumImg" width="150px" alt="not found" src="photo_with_any_size.jpg">
<img id="a64" class="albumImg" width="150px" alt="not found" src="photo_with_any_size.png">
</div>


.albumImg, {

    /* center photos */
    vertical-align: middle;

    /* add some margin for elegance */
    margin: 1em;

    /* Photo hover effects */
    opacity: 0.8;   

    /* Border style and border color */
    padding:8px;
    border:solid;
    border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
    border-width: 1px 2px 2px 1px;
    background-color:white;
}

Edit:开发者_运维问答 This is my Jquery which generates the above html:

                var albumListHTML = '';
                albumListHTML += '<div id="albumListContent">';
                if(num > 0) {               
                    for(var i = 0; i < num; ++i) {
                        albumListHTML += '<img id="a' + data[i].album_id + 
                                         '" class="albumImg" width="150px" src="' + 
                                         data[i].album_cover + '" alt="not found" title="' + 
                                         data[i].album_name + '"/>';                            
                    }                       
                } else {
                    albumListHTML += 'No album found.';
                }
                albumListHTML += '</div>';
                $('#albumListContentWrapper').append(albumListHTML);

I tried adding < span > which wraps < img > and set "float: left" to force the text to be below the < img >, then center text with text-align. The problem is the < img > is "float:none" so the text is floating away.

                    for(var i = 0; i < num; ++i) {
                        albumListHTML += '<span style="">';
                        albumListHTML += '<img id="a' + data[i].album_id + 
                                         '" class="albumImg" width="150px" src="' + 
                                         data[i].album_cover + '" alt="not found" title="' + 
                                         data[i].album_name + '"/>';

                        albumListHTML += '<span style="float: left; text-align: center">' + data[i].album_name + '</span>';
                        albumListHTML += '</span>';
                    }

Just have a look at the sample code here: http://jsfiddle.net/D29ny/

I am not sure how you are going to show the title. If you are setting manually, the sample code will rectify your problem.

I hope this helps!

http://jsfiddle.net/bcNqY/

Adjust numeric values as necessary.