Center image in li vertically and change its height

Question

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:
https://jsfiddle.net/a9jvw03j/1/light/

HTML code:

<div data-role="page" id="page1" style="background: none;" >
  <div id='main-contents'>
    <div id='navigation-drawer'>
      <ul id="list">
        <li class="menuItem" id="helpBtn"><img src="http://i.imgur.com/e3gwOgf.png"><p>Help</p></li>
        <li class="menuItem" id="about"><img src="http://i.imgur.com/LxfxPhI.png"><p>About</p></li>
      </ul>
      <img src="http://i.imgur.com/o3rFRjp.png" id="closeBtn">
  </div>
 </div>

CSS 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;
}

Answer 1

To set the image to 50% height you first have to define the height...otherwise it won't work. Use a background image instead (which would be more appropriate anyway)... then you can set the size to 50% height without knowing the height of the element...which you can adjust with padding-top.

#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 p {
  text-align: center;
  color: white;
  direction: rtl;
  padding: 25px 10px 0 10px;
  background-image: url(http://i.imgur.com/e3gwOgf.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 50%;
}

<div data-role="page" id="page1" style="background: none;">
  <div id='main-contents'>
    <div id='navigation-drawer'>
      <ul id="list">
        <li class="menuItem" id="helpBtn">
          <p>Help</p>
        </li>
      </ul>
    </div>
  </div>

Answer 2

Its not going to center well being floated. To center the elements set a

margin: 0 auto;
text-align: center;
float: none;
display: block;

Then give .menuItem a height.

.menuItem {
  height: 80px;
}

Then you can set the elements inside the list item to a percentage of the li.menuItem height, because now it has a height to base a percentage of.