title: Move text up with CSS
body: <p>I know this can be off topic but i can't align test in center (vertical align).
   This is my menu code:</p>
  
  <pre><code>&lt;nav class="menu"&gt;
      &lt;ul class="active"&gt;
          &lt;li class="current-item"&gt;&lt;a href="#"&gt;
              &lt;i class="fa fa-home fa-3x" aria-hidden="true"&gt;&lt;/i&gt;&lt;strong class="fa-home-1x home-text"&gt;Home&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;           
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-sign-out fa-3x" aria-hidden="true"&gt;&lt;/i&gt;&lt;strong class="fa-home-1x sign-out-text"&gt;Sign Out&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;a class="toggle-nav" href="#"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and i tried different ways to center <code>Home</code> and <code>Sign Out</code> vertically  (should be in a midle of icon) but unsuccessfully. </p>
  
  <pre><code> .home-text{
  // wont't work padding-top: 30px; 
  // wont't work padding-bottom: 30px;
  // also i tried with top:10px etc.
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
      jQuery(this).toggleClass('active');
      jQuery('.menu ul').toggleClass('active');
  
      e.preventDefault();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*----- Toggle Button -----*/
  
  .toggle-nav {
    display: none;
  }
  
  
  /*----- Menu -----*/
  
  @media screen and (min-width: 860px) {
    .menu {
      width: 100%;
      padding: 10px 0px;
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
      border-radius: 3px;
      background: #4CAF50;
    }
  }
  
  .menu ul {
    display: inline-block;
  }
  
  .menu li {
    margin: 0px 50px 0px 0px;
    float: left;
    list-style: none;
    font-size: 17px;
  }
  
  .menu li:last-child {
    margin-right: 0px;
  }
  
  .menu a {
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-decoration: none;
    transition: color linear 0.15s;
  }
  
  .menu a:hover,
  .menu .current-item a {
    text-decoration: none;
    color: #FFFFFF;
  }
  
  
  /*----- Search -----*/
  
  .search-form {
    float: right;
    display: inline-block;
  }
  
  
  /*----- Responsive -----*/
  
  @media screen and (max-width: 1150px) {
    .wrap {
      width: 90%;
    }
  }
  
  @media screen and (max-width: 860px) {
    .menu {
      width: 100%;
      position: relative;
      display: inline-block;
    }
    .menu ul.active {
      display: none;
    }
    .menu ul {
      position: absolute;
      top: 90%;
      left: 0px;
      padding: 10px 10em 0em 2em;
      /* menu width */
      border-radius: 7px;
      background: #4CAF50;
    }
    .menu ul:after {
      width: 0px;
      height: 0px;
      position: absolute;
      top: 0%;
      left: 22px;
      content: '';
      transform: translate(0%, -100%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #303030;
    }
    .menu li {
      margin: 5px 0px 5px 0px;
      float: none;
      display: block;
    }
    .menu a {
      display: block;
    }
    .toggle-nav {
      padding: 20px;
      /* squere element size */
      float: left;
      display: inline-block;
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      background: #4CAF50;
      color: #FFFFFF;
      font-size: 25px;
      transition: color linear 0.15s;
      font-weight: bold;
    }
    .toggle-nav:hover,
    .toggle-nav.active {
      text-decoration: none;
      color: #FFFFFF;
    }
  }
  
  .home-text {
    color: red;
    padding-top: 30px;
    padding-bottom: 30px;
    display: inline-block;
    vertical-align: top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
  &lt;nav class="menu"&gt;
    &lt;ul class="active"&gt;
      &lt;li class="current-item"&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-home fa-3x" aria-hidden="true"&gt;&lt;/i&gt;&lt;strong class="fa-home-1x home-text"&gt;Home&lt;/strong&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-sign-out fa-3x" aria-hidden="true"&gt;&lt;/i&gt;&lt;strong class="fa-home-1x sign-out-text"&gt;Sign Out&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a class="toggle-nav" href="#"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>