title: Center image in li vertically and change its height
body: <p>I have a ul li list , in each li there is an image and a text. The thing I want is to be able to center the image and the text vertically and also set image height to a fixed percent of the li height(for example set image's height to 50% of the li height). it seems I can set the image height to any px I want but setting it to a percent value doesn't affect it at all. I recreated the elements in this fiddle and the codes: <br/>
  <a href="https://jsfiddle.net/a9jvw03j/1/light/" rel="nofollow">https://jsfiddle.net/a9jvw03j/1/light/</a><Br/><Br/>
  HTML code:</p>
  
  <pre><code>&lt;div data-role="page" id="page1" style="background: none;" &gt;
    &lt;div id='main-contents'&gt;
      &lt;div id='navigation-drawer'&gt;
        &lt;ul id="list"&gt;
          &lt;li class="menuItem" id="helpBtn"&gt;&lt;img src="http://i.imgur.com/e3gwOgf.png"&gt;&lt;p&gt;Help&lt;/p&gt;&lt;/li&gt;
          &lt;li class="menuItem" id="about"&gt;&lt;img src="http://i.imgur.com/LxfxPhI.png"&gt;&lt;p&gt;About&lt;/p&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;img src="http://i.imgur.com/o3rFRjp.png" id="closeBtn"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code> #page1 {
      width: 100%;
      height: 100%;
  }
  
  #main-contents{
      z-index: -99;
  }
  
  #navigation-drawer{
      direction: rtl;
      right : 0%;
      width : 33%;
      border:thin solid #000;
      color:#fff;
      position:absolute;
      top:0;
      height:100%;
      background-color:#3c3c3c;
      z-index:999;
  }
  
  
  #list{
       list-style: none;
      -webkit-margin-before: 0em;
      -webkit-margin-after: 0em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      -webkit-padding-start: 0px;
  }
  
  .menuItem{
      list-style-type: none;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 0px;
      width: 100%;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#262626+0,101010+100 */
      background: #262626; /* Old browsers */
      background: -moz-linear-gradient(top,  #262626 0%, #101010 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  #262626 0%,#101010 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  #262626 0%,#101010 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#101010',GradientType=0 ); /* IE6-9 */
  }
  
  .menuItem img{
      float:right;
      margin-right: 8px;
  }
  
  .menuItem p{
      text-align: center;
      display: inline-block;
      padding-right: 10px;
    color : white;
    direction : rtl;
  }
  
  #closeBtn{
      position: absolute;
      width: 25%;
      bottom: 2%;
      left: 50%;
      margin-left:-12.5%;
      z-index : 100;
  }
  </code></pre>