Question

我尝试垂直对齐购物车图片，并在悬停时也进行更改。我检查了其他答案，但它们似乎都涉及改变高度。

JSFIDDLE http://jsfiddle.net/omarel/8agvv15s/

.navlogo, .navlogo_strip {
z-index:99;  
}
.navlogo img {
width:120px;
margin:10px 10px 10px 10px;
}
.navlogo_strip img {
width:50px;
margin:10px 10px 10px 10px;
}

.floatleft {
float:none;    
}
.floatright {
float:none;    
}

.nav_container ul li {
display: inline-block;
text-align: center;  
line-height:90px;
}

.nav_container ul li a {
padding:50px 30px 50px 30px;
margin:0px;
cursor:pointer;
}

.nav_container ul {
/*  margin-top:15px; */
margin-left:30px;
margin-top:0px;
}

.nav_container {
 text-align: center;
 width:100%;
 font-size:16px;  
 letter-spacing: -1px; 
}
.nav_container ul li:hover {
/* not needed background-color:#08298A; */
}

.nav_container ul li:hover a {
 color:#fff;
 background-color:#08298A;
}
header {
width:100%; 
margin: auto;
min-width:420px;
/* 0 0 8px rgba(0,0,0,0.1)*/
}

HTML

        <div class="navlogo floatleft">
           <a href="http://localhost/auction/"><img src="logo.png" /></a>
        </div>


      <div class="desktopnav">
          <div class="floatleft">

          <div class="nav_container">
              <ul>
                  <li><a href="">Browse</a></li><li><a href="">Sell</a></li>
              </ul>
          </div>

        </div>

       <div class="floatright">

          <div class="nav_container">
              <ul>
                  <li><a href=""><img src="http://s10.postimg.org/s09rtjls5/cart.png?noCache=1430871415" /></a></li><!-- <li><a href="">Profile</a></li> --><li><a href="">Sign out</a></li>
              </ul>
          </div>

          </div>
        </div>
       <div style="clear:both;"></div>
  </header>

Answer 1

在CSS中使用background-position属性可以在主元素中移动背景图像。

来源：Link

Answer 2

这里有一个很好的解释和解决方案：http://css.maxdesign.com.au/listutorial/master.htm

它表示使用list-style-image会导致图像与不同浏览器的位置不一致。然后，它解释了如何使用背景图像的子弹以获得更好的结果。

来源：CSS ul li image to align with text

垂直对齐li标签中没有高度的图像

2 个答案: