Question

我有一个ul li列表，每个li都有一个图像和一个文本。我想要的是能够垂直居中图像和文本，并将图像高度设置为li高度的固定百分比（例如，将图像的高度设置为li高度的50％）。我似乎可以将图像高度设置为我想要的任何px，但将其设置为百分比值根本不会影响它。我重新创建了这个小提琴中的元素和代码：
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％高度，而无需知道元素的高度......你可以使用{{ 1}}。

＆＃13;

padding-top

＆＃13;

#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%;
}

＆＃13;

垂直居中的图像并改变其高度

2 个答案: