CSS-li元素集高度

我正在尝试建立一个导航菜单。这里有几件

#主菜单.导航栏{列表样式：无；页边距顶部：40px；}
#主菜单.导航栏li{显示：内联；填充：0 10px；}
#主菜单。导航栏LIA{
文字装饰：无；
左侧填充：50px；
文本转换：大写；
颜色：#333；
显示：内联块；
文本阴影：1px 1px 1px#ccc；
}
.nav bar.nav按钮home a{background:url（“home.png”）不重复0px-20px透明；}

我认为没有办法使您的li动态拉伸到背景图像的大小。然而，你可以很容易地做相反的事情，为你的li设置一个确定的高度，然后将你的背景设置为“包含”。这将缩小图像以适合您的li，而无需剪裁

css

}

---

删除背景属性“透明”

#主菜单.导航栏{列表样式：无；页边距顶部：40px；}
#主菜单.导航栏li{显示：内联；填充：0 10px；}
#主菜单。导航栏LIA{
文字装饰：无；
左侧填充：50px；
文本转换：大写；
颜色：#333；
显示：内联块；
文本阴影：1px 1px 1px#ccc；
}
.nav bar.nav按钮home a{background:url（“home.png”）不重复0px-20px；}

正文{字体系列：无衬线；}
#主菜单.导航栏{列表样式：无；页边距顶端：40px；}
#主菜单.导航栏li{显示：内联；填充：0px 30px；}
#主菜单。导航栏LIA{
高度：48px；
宽度：48px；
显示：内联块；
背景尺寸：包含；
背景重复：无重复；
文字装饰：无；
左侧填充：25px；
文本转换：大写；
颜色：#333；
文本阴影：1px 1px 1px#ccc；
位置：相对位置；
}
.nav bar.nav按钮home a{background:url（“commons/imgs/prism/home.png”）0px-0px；}
.nav bar.nav按钮资产a{background:url（“commons/imgs/prism/assets.png”）0px-0px；}
.nav bar.nav按钮报警a{background:url（“commons/imgs/prism/alarms.jpg”）0px-0px；}
跨度{
位置：绝对位置；
顶部：50px；
左：0px；
宽度：100%；
文本对齐：左对齐；
填充：10px 0 10px 0；
}

---

我唯一的问题是文本中心与图像中心不完全对齐。

使用css背景时，图像会根据其容器进行调整，反之亦然。或者，如果希望容器能够调整，请使用。最好指定li的高度，然后使用背景大小：100%；是的，一切顺利，谢谢！我发布自己的代码时遇到了一个小问题。我正试着投票，但我的声誉很低。我明白了。如何水平显示？我还想在图片下面显示一些文本。@标记只需添加显示：内联块；给你的李牌。有几种不同的方法可以将文本添加到图像的底部。我已经更新了fiddle和我的代码片段，向您展示了我是如何做到这一点的。请尝试将（span）top:140px也更改为180px，看看这如何满足您的需要。

  li {

height:180px;
width:240px;
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
background-size: contain;
background-repeat: no-repeat;
border:1px solid #656565;
display:inline-block;
position:relative;

span {
    position:absolute;
    top:140px;
    width:100%;
    text-align:center;
    background-color:rgba(255, 255, 255, 0.9);
    padding:10px 0 10px 0;
    border:1px solid #656565;
}

     <style type="text/css">
    body { font-family: sans-serif; }

    #main-menu .nav-bar { list-style:none; margin-top: 40px; }
    #main-menu .nav-bar li { display:inline; padding:0px 30px; }

    #main-menu .nav-bar li a {
      height:48px;
      width:48px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      text-decoration: none;
      padding-left: 25px;
      text-transform: uppercase;
      color: #333;
      text-shadow: 1px 1px 1px #ccc;
      position:relative;

    }

    .nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; }
    .nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; }
    .nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; }
    span {
        position:absolute;
        top:50px;
        left:0px;
        width:100%;
        text-align:left;
        padding:10px 0 10px 0;
    }

</style>

<nav id="main-menu">
     <ul class="nav-bar">
         <li class="nav-button-home"><a href="#"><span>Home</span></a></li>
         <li class="nav-button-assets"><a href="#"><span>Assets</span></a></li>
         <li class="nav-button-alarms"><a href="#"><span>Alarms</span></a></li>
     </ul>
</nav>