title: Make image stick to list in center of webpage
body: <p>I'm trying to make an image stuck to the left side on the same height. However, it just won't work. The image is smaller in my actual version of the code bhut that shouldn't affect the output. Here's my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav {
    text-align: center;
    background: #b7b7b7;
  }
  
  #nav li {
    display: inline-block;
    padding: 12px;
  }
  
  #nav li:hover {
    background: #662282;
  }
  
  #nav li.app {
    background: #f28a24;
  }
  
  #nav li.home {
    background: #662282;
  }
  
  #nav a {
    color: white;
    font-family: gillsans-light;
    font-size: 16px;
  }
  
  &lt;!-- image here --&gt;
  #nav img {
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
    &lt;a href="http://www.#.com"&gt; &lt;img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png"&gt;
      &lt;ul&gt;
        &lt;li class="home"&gt;&lt;a href="http://www.#.com/#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="cloud"&gt;&lt;a href="http://www.#.com/cloud"&gt;Cloud&lt;/a&gt;&lt;/li&gt;
        &lt;li class="color"&gt;&lt;a href="http://www.#.com/#color"&gt;Color&lt;/a&gt;&lt;/li&gt;
        &lt;li class="features"&gt;&lt;a href="http://www.#.com/features"&gt;Features&lt;/a&gt;&lt;/li&gt;
        &lt;li class="tools"&gt;&lt;a href="http://www.#.com/#tools"&gt;Tools&lt;/a&gt;&lt;/li&gt;
        &lt;li class="solutions"&gt;&lt;a href="http://www.#.com/solutions"&gt;Solutions&lt;/a&gt;&lt;/li&gt;
        &lt;li class="about"&gt;&lt;a href="http://www.#.com/about-us"&gt;About us&lt;/a&gt;&lt;/li&gt;
        &lt;li class="contact"&gt;&lt;a href="http://www.#.com/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;li class="app"&gt;&lt;a href="http://app.#.cloud/"&gt;APP&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  <strong>UPDATED TO INCLUDE TEST IMAGE</strong></p>