Question

我在网站上显示一些照片。 我想在每张照片下方添加照片标题。我尝试了很多方法，但它仍然无效。这是html和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;
}

enter image description here

修改这是我的Jquery生成上面的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);

我尝试添加＆lt; span＆gt;包裹＆lt; img＆gt;并设置“float：left”以强制文本低于＆lt; img＆gt;，然后使用text-align中心文本。问题是＆lt; img＆gt;是“浮动：无”，所以文字正在浮动。

                    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>';
                    }

Answer 1

在这里查看示例代码：http://jsfiddle.net/D29ny/

我不确定你将如何显示标题。如果您手动设置，示例代码将纠正您的问题。

我希望这有帮助！

Answer 2

http://jsfiddle.net/bcNqY/

根据需要调整数值。

在照片下添加标题

2 个答案: