title: Centre text within responsive image
body: <p>I'm having trouble centring text within a responsive image. I've tried <code>vertical-align:middle</code>. It vertically centres the text, but it's next to the image, not in front of the image.</p>
  
  <p>As you can see my image is responsive so I would like the text to move with the image. Thank you in advance for your help.</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/gEh49/" rel="nofollow">http://jsfiddle.net/gEh49/</a></li>
  </ul>
  
  <h3>HTML:</h3>
  
  <pre><code> &lt;div class="image"&gt;
   &lt;img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and-prosper/feature.jpg" class="ri" id="hv" /&gt;
   ASAP ROCKY - Jack New City&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code> img.ri
   {
   position: relative;
   max-width: 75%;
   display: inline-block;
   vertical-align: middle;
   }
  
   @media screen and (orientation: portrait) {
   img.ri { max-width: 90%; }
   }
   @media screen and (orientation: landscape) {
   img.ri { max-height: 90%; }
   }
  
   img#hv {
   filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
   filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome &amp; Safari 6+ */
   }
  
   img#hv:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  </code></pre>
  
  <p>}</p>