Размещение текста над изображением с помощью HTML и CSS

Вы можете удалить тег изображения и сделать изображение фоном контейнера div.

HTML

<div class="text">
    Heading
</div>

CSS

.text {
    background-image: url('sample.jpg');
    text-align: center;
}

EDIT: Я не хочу продавать его в качестве своего идеального ответа, но я понял, что пропустил вертикальное выравнивание, и поскольку подобные решения уже были представлены здесь в комментариях и ответах, позвольте мне просто предоставить вам хороший источник информации ниже, Дело в том, что вы можете использовать vertical-align:middle если вы использовали span или другой встроенный элемент, но с div, вам нужно использовать другие трюки, такие как position:absolute и минус поля.

Источник: http://phrogz.net/css/vertical-align/index.html

Я бы не рекомендовал использовать линейную диаграмму для вертикального выравнивания текста (как подсказывают некоторые ответы) только потому, что, если заголовок должен быть длинным и охватывает две строки, он выглядит ужасно.

То, что я хотел бы сделать, - это абсолютное положение заголовка, а затем использовать display: table-cell для вертикального выравнивания.

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

HTML

<div class="thumbnail">
  <div class="text">
      <h1>Heading</h1>
  </div>
  <div class="image">
      <img src="http://placehold.it/350x250" />
  </div>
</div>

CSS

  .thumbnail{
    position: relative; 
    display: inline-block;
}
.text{
    position:absolute; 
    top: 0px; 
    left: 0px; 
    width: 350px;
}
.text h1{
    height: 250px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;  
    width: 350px; 
    color: #fff;
}

JSfiddle здесь

Следующие могут помочь вам.

HTML:

<div class="thumbnail">
    <div class="text">
         Heading
    </div>
</div>

CSS:

.text {
    background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
    width: 320px;
    height: 240px;
    line-height: 240px;
    vertical-align: middle;
    text-align: center;
    font-size: 48px;
}

Учтите, что при таком подходе вам нужно будет вручную задать height и width вашего text элемента. Кроме того, height должна быть дублирована на line-height чтобы вертикальное выравнивание работало правильно.

Вы можете проверить и изменить код в соответствующем JSFiddle или просто проверить полноэкранный результат.