title: Align text and icon-font icon in span at center of parent div
body: <p>I´m trying to align some text in a <code>&lt;span&gt;</code> tag inside a div container. The text should be at the vertical center of the container and several pixels away from the left border. The distance to the left was no big deal but how can I place my text at the vertical center of his parent <code>&lt;div&gt;</code> container ?</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.container{
    border: 1px solid red;
    height: 50px;
    width: 100px;
    }
  
  .container-content{
    height: 40px;
    border: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-top: 5px;
    margin-left: 3px;
    margin-right: 3px;
    }
  
  .container-content span{
    margin-left: 2px; 
  
    }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="container-content"&gt;
      &lt;span&gt;Text&lt;span&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>All the suggested answers are working great with text but if I use a icon-font the icon isn´t placed at the center. How to fix this issue with googles material-icon font ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    border: 1px solid red;
    height: 50px;
    width: 100px;
  }
  .container-content {
    height: 40px;
    border: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-top: 5px;
    margin-left: 3px;
    margin-right: 3px;
    display: flex;
    align-items: center;
  }
  .container-content span {
    margin-left: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="container-content"&gt;
        &lt;span&gt;&lt;span&gt;&lt;i class="material-icons"&gt;check_circle&lt;/i&gt;&lt;span&gt;  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>