как правильно разместить подписи?

Question

У меня есть галерея изображений, которая на данный момент отображает только изображения.Я бы хотел, чтобы галерея выглядела так (моя простая тестовая галерея): http://jsfiddle.net/karin_A/Nmxx4/1/ т.е. заголовок в центре под изображением.

Лучшее, чего я смог достичь на данный момент, - это галерея, в которой заголовок расположен ниже, но справа от изображения:

htmlконтейнер изображений:

 <div data-role="content" id="pagecontent" class="gallerycontent">
    <?= $output ?>
        </div> 

php вывод изображения:

 $html .= '<a href="#imgshow" data-transition="pop" data-index="'.$i.'" data-rel="dialog" id="thumb">
        <img src="https://[url]/'.rawurlencode($this->_decode_path($xml->COM->MOVIE[$i]->attributes()->dbIcoFilename)).'" alt="'.$xml->COM->MOVIE[$i]->attributes()->nameS.'" class="imgAlt">
        </a>';

jQuery добавляет границу переноса и заголовок:

$.each($("img"), function() {
        $(this).wrap('<div class="wrapper"/>');
    });
    $.each($("img.imgAlt"), function() {
        $(this).after($(this).attr("alt"));
    });

css:

#pagecontent {
text-align:center;
font-size:12px;
color:#000;
text-decoration:none;
}

.wrapper{
    float:left;
    padding:0.2em;
    border: 1px solid #C0C0C0;
    margin:10px;
}

.thumb{
    padding: 0.1em;
    margin-right: 10px;
    margin-bottom: 15px;
}

.gallerycontent a img { 
    margin: 0.2em;
}

.caption{
    float:left;
    width:100%;
}

Когда я ограничиваю ширину (width: 100px;), если граница переноса, я получаю такой результат: , который, как вы можете видеть, работает, если имя изображения действительно короткое, но иногда это не так.

Еще одна попытка:

$.each($("img.imgAlt"), function() {
        var title = this.alt;
        $(this).after('<div class="caption">'+ title +'</div>');
    });

, которая размещает заголовок по центру под изображением, но также заставляет div заполнять всю ширину страницы, а не только ширину заголовка.

Answer 1

Просто укажите ваш .caption текст для автоматического центрирования, например:

.caption {
   text-align:center;
}

Редактировать: демо

Answer 2

Я нашел решение, которое работает. Вместо этого я превратил новый div в новый span:

$.each($("img.imgAlt"), function() {
    var imgAlt = this.alt;
    $(this).empty().after('<span class="caption">'+ imgAlt +'</span>');
});

и изменил CSS для .caption следующим образом:

.caption{
    display: block;
    text-align: center;
    text-decoration:none;
    clear:both;
    text-align:center;
    font-size:80%
}

Answer 3

Попробуйте добавить clear:both к вашему .caption классу CSS