title: How do I put text on an image with the img tag in a container, then center the text in that div?
body: <p>What I now have is this:</p>
  
  <pre><code>&lt;div class="columns"&gt;
              &lt;h1&gt;Text&lt;/h1&gt;
              &lt;img src="images/camera.jpg"&gt;
  </code></pre>
  
  <p>My CSS, I basically have 3 columns with an image in them using the img tag</p>
  
  <pre><code>.columns{
      float: left;
      width: 33.33%;
      margin-right: 0px;
  }
  
  .columns img{
      display: inline-block;
      width: 95%;
      margin: 20px;
   }
  
  .columns h1{
      position: absolute;
      color: white;
      margin-top: 12px;
      z-index: 1;
  }
  </code></pre>
  
  <p>How do I center the text in a column?</p>