title: Content fails to align vertically in an inline-block without having knock-on effects
body: <p>I really cannot figure this extremely simple thing out and has wasted hours of my time. just want to very simply put the text that is inside the circles to be in the middle of the circles, not at the top.</p>
  
  <p>I've seen all the other posts but this has to be an inline-block and none of their solutions seem to apply to mine. Any change seems to have knock-on effects elsewhere in my document and lead to additional problems. Does anyone else get this when building websites? really wastes so much time and still no solution gets found. Very frustrating. I'd be very thankful of any help.</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>/* INDEX */
  .index-cta {
      width: 150px;
      height: 150px;
      background: url("https://puxccbo05z-flywheel.netdna-ssl.com/wp-content/uploads/2015/02/elephant-1.jpg");
      border-radius: 50%;
      display: inline-block;
      margin-top: 30px;
      
      
  }
  #index-cta-1 { margin-right: 5% }
  #index-cta-2 { margin-left: 5% }
  .index-cta-emphasis {
      font-size: 22px;
      text-transform: uppercase;
      display: block;
  }
  
  /* MAIN */
  .first-sec {
      background: lightblue;
      width: 100%;
      height: auto;
      float: left;
      text-align: center;
      padding: 150px 10% 100px 10%;
      box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;section class="first-sec"&gt;
          &lt;h1&gt;Lorem the printing and typesetting industry.&lt;/h1&gt;
          &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dumm&lt;/p&gt;
          &lt;p&gt;Lorem Ipsum is simply dummy text wjdvbo wowing_p:&lt;/p&gt;
          &lt;nav id="index-cta-1" class="index-cta"&gt;A &lt;span class="index-cta-emphasis"&gt;NSIBUSME&lt;/span&gt; EIMA&lt;/nav&gt;
          &lt;nav id="index-cta-2" class="index-cta"&gt;A &lt;span class="index-cta-emphasis"&gt;MMA_IENX&lt;/span&gt; EMMU&lt;/nav&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>