title: Positioning absolute div with title
body: <p>I am working on some html code but came to a problem. This is what we are trying to do:</p>
  
  <p>We will have multiple images in a single row(list), the width will be fullwidth, so they will change height regarding the browser width. This works ok, but we have a problem with setting the caption on to them. We want to set the caption in the middle of this image, so that it is vertically in the middle and in the center horizontally. It would also need to take the full image height.</p>
  
  <p>Here is what we have and what we want to have:</p>
  
  <p><a href="http://jsfiddle.net/nxL7pwq2/5/" rel="nofollow">Example here JSFIDDLE</a></p>
  
  <p>Code: </p>
  
  <pre><code>body {
      background: #fafafa;
  }
  
  .wrapper {
      position: relative;
      display: block;
      float: left;
  }
  
  ul {
      list-style: none;
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
  }
  
  ul li {
      width: 20%;
      height: auto;
      float: left;
      position: relative;
  }
  
  img {
      max-width: 100%; 
      height: auto;
      float: left;
  }
  
  .title-wrapper {
      position: absolute;
      text-align: center;
      width: 100%;
      height: 100%;
      top: 0;
      vertical-align: middle;
      text-align: center;
      background: rgba(0,0,0,0.4);
  }
  .title-wrapper a {
      color: #000;
      background: #fff;
      padding: 0 30px;
      text-decoration: none;
  }
  
  .wanted-result {
      width: 100%; 
      margin-top: 30px; 
      margin-bottom: 30px; 
      float: left;
  }
  
  .get-result {
      width: 100%; 
      margin-bottom: 30px; 
      float: left;
  }
  
  &lt;div class="get-result"&gt;
      This is what get:
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="list-wrapper"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /&gt;&lt;/li&gt;  
  
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="title-wrapper"&gt;
          &lt;a href="#"&gt;Title&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wanted-result"&gt;
      This is what we want to get:
  &lt;/div&gt;
  &lt;img src="http://s12.postimg.org/ibhy38epp/birds.jpg" /&gt;
  </code></pre>
  
  <p>Thanks!</p>