title: How to bottom align and center an responsive image in a column
body: <p>I have this layout (which is a header):</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-2" style="background-color: aqua; height: 160px;"&gt;
              &lt;img src="logo.png" class="img-responsive logo"&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-8" style="background-color: blueviolet; height: 160px;"&gt;&lt;/div&gt;
          &lt;div class="col-sm-2" style="background-color: aqua; height: 160px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what i would like to achieve is:</p>
  
  <ul>
  <li>Align the logo to the bottom and the center</li>
  <li>Let the image be responsible (set width to 80% of the column)</li>
  </ul>
  
  <p>I did this:</p>
  
  <pre><code>.logo {
    position: absolute;
    width: 80%;
    left: 10%;
    right: 10%;
    bottom: 0;
  }
  </code></pre>
  
  <p>but it somehow dosen't work as you can see here:
  <a href="https://jsfiddle.net/9kauhbhs/2/" rel="nofollow">https://jsfiddle.net/9kauhbhs/2/</a></p>