title: How to Vertical align elements of a list?
body: <p>I have a <code>ul</code> where one of its children is positioned on the left side (vertically centered with absolute position), but the rest of the items have to be vertically aligned as well but displayed as a column.</p>
  
  <p>The left li is all right, I just can't find a way to vertically align a list of elements</p>
  
  <p>I've created a <a href="http://jsfiddle.net/7frcd5mx/" rel="nofollow noreferrer">fiddle</a> where I show how this works currently</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>#outer {
    position: relative;
    height: 100vh;
  }
  
  .notAligned {
      position: absolute;
      left: 10%;
      top: 50%;
      top: calc(50% - 25px);
      transform: translateY(-50%);
      width: 35%; } 
  
  .inner {
    margin-left: 50% !important;
    width: 50%;
    position: static;
  }
  
  
  
  
  /* Structure */
  #outer {
    border: 1px solid green;
    padding: 20px;
    background: #f443363b;
  }
  
  .inner {
    border: 1px solid red;
    height: 3em;
    margin: 5px 0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="outer"&gt;
    &lt;li class="notAligned"&gt;Not Aligned&lt;/li&gt;
    &lt;li class="inner"&gt;Aligned&lt;/li&gt;
    &lt;li class="inner"&gt;Aligned&lt;/li&gt;
    &lt;li class="inner"&gt;Aligned&lt;/li&gt;
    &lt;li class="inner"&gt;Aligned&lt;/li&gt;
    &lt;li class="inner"&gt;Aligned&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>