CSS - изображение выравнивание заголовка не работает

Question

У меня есть HTML, который выглядит следующим образом:

   <div class="large-4 columns"> 
        <div class="promo-box"> 
         <a href="#"> 
          <img src="/our-projects-sfk.png"> 
          <div class="caption"> 
          <h5><Våre prosjekter</h5> 
          <p>Hver sommer i 20 år har vi gledet familier som har et kreftrammet barn med tre-dagers drømmetur til Kristiansand Dyrepark.</p> 
          </div> 
         </a> 
        </div> 
       </div> 

Поскольку я не знаю ширину изображения заранее, я не могу установить фиксированную ширину для DIV и вместо этого нужно div и caption, чтобы взять ширину изображения. Я пробовал все, установив promo-box на display: inline-block, а также установив его на display: table и используя figure и figcaption теги, но ничего не получилось. Не знаете, как установить caption на ширину изображения?

Это была моя попытка:

.promo-box { 
    display: table; 
} 

.promo-box img { 
    width: 100%; 
    height: auto; 
    vertical-align: top; 
    margin-bottom: 3px; 
} 

.promo-box .caption { 
    display: table-caption; 
    caption-side: bottom; 
    box-sizing: border-box; 
    padding: 10px; 
    margin: 0; 
} 

С этим конечный результат был таков:

Answer 1

Если ваш .promo-box представляет собой таблицу, вы должны сделать изображение и контейнер заголовка table-rows и назначить text-align: center контейнеру с надписью.

Дополнение

Смотрите эту codepen: http://codepen.io/anon/pen/zNyQGQ

Я также добавил фиксируется в контейнере - в противном случае изображение всегда будет шире, как текст заголовка.

ДОПОЛНЕНИЕ ПОСЛЕ COMMENT:

Хорошо, затем сотрите ширину на контейнере и изменить CSS в подписи к этому:

.promo-box .caption { 
    display: table-caption; /* changed */ 
    width: 100%; /* changed */ 
    box-sizing: border-box; 
    padding: 10px; 
    margin: 0; 
    text-align: center; 
} 

Смотреть новый codepen: http://codepen.io/anon/pen/LxMwBK

Answer 2

Вы хотите текст будет такой же ширины, как и изображение? У вас это есть. Вам не нужны ни таблицы, ни таблицы.

Здесь img и .caption имеют одинаковую ширину .promo-box.

.promo-box { 
 
    border: 1px solid red; 
 
    width: 50%; 
 
} 
 
.promo-box img { 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: 3px; 
 
} 
 
.promo-box .caption { 
 
    margin: 0; 
 
}

<div class="large-4 columns"> 
 
    <div class="promo-box"> 
 
    <a href="#"> 
 
     <img src="http://dummyimage.com/400x250"> 
 
     <div class="caption"> 
 
     <h5><Våre prosjekter</h5> 
 
     <p>Hver sommer i 20 år har vi gledet familier som har et kreftrammet barn med tre-dagers drømmetur til Kristiansand Dyrepark.</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>