title: How to create a <button> with two stacked <span> elements all center aligned?
body: <p>So far I have this:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;button&gt;
      &lt;span class="outter"&gt;
          &lt;span class="inner"&gt;Line A&lt;/span&gt;
          &lt;span class="inner"&gt;Line b&lt;/span&gt;
      &lt;/span&gt;
  &lt;/button&gt;
  
  &lt;button&gt;
      &lt;span class="outter"&gt;
          &lt;span class="inner"&gt;Line X&lt;/span&gt;
      &lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* {
      box-sizing: border-box;
  }
  
  button {
      width: 100px;
      height: 40px;
      background-color: #CCFFCC;
      border: none;
      overflow: hidden;
      border-radius: 5px;
  }
  
  button .outter {
      display: inline-block;
      width: inherit;
  }
  
  button:active .outter {
      background-color: rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.35);
  }
  
  button .inner {
      display: inline-block;
      width: inherit;
  }
  </code></pre>
  
  <p><strong>Demo:</strong> <a href="http://jsfiddle.net/Lb3htfmx/2/" rel="nofollow">http://jsfiddle.net/Lb3htfmx/2/</a></p>
  
  <p>But there's quite a few problems with this as you can see in the demo. Here's how I want this button to behave:</p>
  
  <ul>
  <li>The buttons need to be aligned between themselves, preferably without using a parent container. I have no idea why the second button dropped a bit since they are inline elements.</li>
  <li>The text is not correctly aligned to the middle. I also have no idea why this is happening. If you click the button, you'll see the problem more clearly.</li>
  <li>When you click the button, I want a shadow and the whole button background darker. I want to avoid specifying a dark color with opacity, I really want to use some sort of darken filter (similar to what I did).</li>
  </ul>
  
  <p>How can I fix these problems?</p>