Twitter-загрузочная медиа-сетка: как добавить подпись к эскизам

Я использую twitter bootstrap и функцию media-grid для отображения некоторых thumnabils изображений. Вот как это выглядит прямо сейчас: http://jsfiddle.net/vXMMA/

Что я хотел бы сделать, так это добавить надпись к этим эскизам. может кто-то предложить какую-то идею о том, какие изменения в CSS мне нужно сделать, чтобы это сделать.

Ответы

Ответ 1

HTML

  <li>
    <a href="#">
        <legend >Caption</legend>
        <img class="thumbnail" src="http://placehold.it/140x90" alt="">
    </a>
  </li>

CSS

legend { margin:3px; text-align:center;width:100%}

Working DEMO

Ответ 2

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

<ul class="thumbnails">
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
</ul>
<hr>

<ul class="thumbnails">
    <li class="span4">
    <div class="caption">
      <h5>Caption above</h5>
    </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span4">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    <div class="caption">
      <h5>Caption below</h5>
    </div>
    </li>
</ul>

Вы можете центрировать заголовок внутри контейнера изображения, просто изменив класс .caption и добавив свойство text-align: center, например:

.caption {
    text-align:center;
}

Демо: http://jsfiddle.net/2BBnR/

Примечание. Отмечено, что это сообщение устарело, поэтому другой опубликованный метод не имеет отношения к последней загрузке, класс .media-grid больше не используется.

Ответ 3

Просто используйте тег <legend> до или после каждого изображения и добавьте стиль text-align:center в сетку изображения.

Смотрите эту демонстрацию, она отлично работает.