title: Align bullet point with the center of <li> elements
body: <p>In the following snippet, I am trying to display an unordered list with bullet points with a <code>font-size</code> bigger than the associated <code>&lt;li&gt;</code> elements. However, in the case of the 2nd element, the bullet point is aligned with the upper corner of the image. Is there a way to change that to force the bullet point to align with the center of the <code>&lt;li&gt;</code> elements (in this case, the <code>&lt;span&gt;</code>) ?</p>
  <hr />
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li{
      font-size: 24px;
  }
  
  li span{
      font-size: 14px;
  }
  
  .table-display{
      display: table-cell;
      vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;span&gt;
          Welcome to the help page
          &lt;/span&gt;
      &lt;/li&gt;
      
      &lt;li&gt;
          &lt;span&gt;
              &lt;div class="table-display"&gt;
                  &lt;img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-512.png" alt="phone icon" height="64" width="64"&gt;
              &lt;/div&gt;
              &lt;div class="table-display"&gt;
                  The Help Desk&lt;br/&gt;
                  phone number is :&lt;br/&gt;
                  &lt;span style="font-weight:bold;"&gt;(+01)2 34 56 78 90&lt;/span&gt;
              &lt;/div&gt;
          &lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>