JSFiddle - React, Tailwind, and code Playground

HTML

<!-- DOCTYPE must be 'html' -->
<span class="area">
  <span class="content">
      <h1>header</h1>
      <p>content</p>
  </span>
</span>

CSS

html, body, div, span, table, tr, td {margin:0; padding:0; border: 0}

.area {
  display:block;
  height:200px;      /* 'height' cannot be relative (bc 'line-height' can't) */
  line-height:200px; /* same as 'height' */
  font-size:0;       /* must be 0 */

  text-align:center;
  width:200px;
  background-image: url(http://i.imgur.com/JKYdC.png);
}

.content {
  display:inline-block;
  vertical-align:middle;
  line-height:normal;
  font-size:16px;
  
  width: 50%;
  background-color: #f88
}