垂直居中放置圖像並更改其高度

Question

我有一個列表，每個列表中都有一個圖像和一個文本。 我想要的是能夠使圖像和文本垂直居中，並且還可以將圖像高度設置為li高度的固定百分比（例如，將圖像的高度設置為li高度的50％）。 看來我可以將圖像高度設置為我想要的任何像素，但是將其設置為百分比值完全不會影響它。 我重新創建了該小提琴中的元素和代碼：
https://jsfiddle.net/a9jvw03j/1/light/

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>

CSS代碼：

 #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

它不會居中浮動。 要居中設置元素

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

然后給.menuItem一個高度。

.menuItem {
  height: 80px;
}

然后，您可以將列表項中的元素設置為li.menuItem高度的百分比，因為現在它具有一個以百分比為基礎的高度。

Answer 2

要將圖像設置為50％的高度，您首先必須定義高度...否則它將不起作用。 改用背景圖片（無論如何都會更合適）...然后您可以將大小設置為50％的高度， 而無需知道元素的高度...您可以使用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>