title: How to vertically center align a :before element
body: <p>How do you vertically center align a <code>:before</code> element. I have tried using <code>vertical-align: bottom</code>, <code>vertical-align:middle</code>, <code>vertical-align: -50%</code> and <code>vertical-align:super</code>. Nothing I do is bringing the plus symbol down to be vertically center aligned with the text next to it.</p>
  
  <p>Any ideas?</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>.infoTitles {
   color: #2E393F;
   font-family: 'Muli', sans-serif;
   font-size: 1.5rem;
   line-height: 1.5em;
  }
  .infoTitles:before {
   content: '';
   vertical-align: super;
   float: left;
   margin-right: 8px;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ios7-essence/22/add_plus-512.png');
   background-size: 15px 15px;
   width: 15px;
   height: 15px;
   display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="faqBlock"&gt;
    &lt;div class="infoTitles"&gt;How long will I expect to wait for a quote?&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>