Html 将图像垂直居中并更改其高度

我有一个ul li列表，每个li中都有一个图像和一个文本。我希望能够将图像和文本垂直居中，并将图像高度设置为li高度的固定百分比（例如，将图像高度设置为li高度的50%）。似乎我可以将图像高度设置为我想要的任何像素，但将其设置为百分比值根本不会影响它。我重新创建了这把小提琴中的元素和代码：


HTML代码：

<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>

---

它不会让中心井浮动。要使元素居中，请设置一个

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

然后给.menuItem一个高度

.menuItem {
  height: 80px;
}

---

然后，您可以将列表项中的元素设置为li.menuItem高度的百分比，因为现在它有一个以百分比为基础的高度。

要将图像设置为50%高度，您首先必须定义高度……否则它将不起作用。改为使用背景图像（无论如何这更合适）。。。然后，您可以在不知道元素高度的情况下将大小设置为50%高度…您可以使用

padding top

进行调整

#第1页{
宽度：100%；
身高：100%；
}
#主要内容{
z指数：-99；
}
#导航抽屉{
方向：rtl；
右：0%；
宽度：33%；
边框：薄实线#000；
颜色：#fff；
位置：绝对位置；
排名：0；
身高：100%；
背景色：#3c；
z指数：999；
}
#名单{
列表样式：无；
-之前的webkit页边距：0em；
-webkit页边距：0em；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：0px；
}
梅努特姆先生{
列表样式类型：无；
填充顶部：0；
填充底部：0；
右边填充：0px；
宽度：100%；
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#262626+0,101010+100 */
背景：#262626；
/*旧浏览器*/
背景：-moz线性梯度（顶部，#262626 0%，#101010 100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（顶部，262626 0%，101010 100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#262626 0%，#101010 100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#262626'，endColorstr='#101010'，GradientType=0）；
/*IE6-9*/
}
梅努伊特姆先生{
文本对齐：居中；
颜色：白色；
方向：rtl；
填充：25px 10px 0 10px；
背景图片：url(http://i.imgur.com/e3gwOgf.png);
背景位置：中上；
背景重复：无重复；
背景尺寸：自动50%；
}

帮助

非常感谢@TuckWise。我试过你的代码，它工作正常，除了我需要让元素在右边水平，另一件事是我需要用百分比表示菜单项高度，而不是实际的像素高度@Paulie_D，但我不希望它们水平居中，我希望它们垂直居中

.menuItem {
  height: 80px;
}