logo标签列表

在Chrome中垂直对齐li元素内的图片问题

htmlcssvertical-alignment
5

我希望在li中垂直对齐图像，我的代码在火狐浏览器中运行良好，但在chrome浏览器中不起作用。有人能帮助我吗？

以下是HTML代码：

 <div class="brands container content">
    <ul id="brandlogo">
      <li><a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Dickies/b/11442640011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Healing-Hands-Purple-Label/b/11442641011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Heart-Soul/b/11442643011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Koi/b/11442644011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/New-Balance/b/11442645011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Nurse-Mate/b/11442646011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Renova/b/11442647011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Skechers/b/11442648011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt=""/></a></li>
          <li><a href="http://scrub-market.hostedbywebstore.com/Wonderwink/b/11442649011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt=""/></a></li>
        </ul>
</div>

以及CSS：

#brandlogo {
  text-align: center;
  padding: 0px;
  margin: 30px 0px 0px;
  position: relative;
  list-style: outside none none;
}

#brandlogo li {
    border: 1px solid #DDD;
    float: none;
    display: inline-block;
    padding: 0px 35px;
    width: auto;
    margin: 10px 10px 10px 0px;
    height: 150px;
    line-height: 150px;
    border-radius: 5px;
}
#brandlogo li a {
  float: none;
  width: 100%;
}
#brandlogo li a img {
  vertical-align: middle;
}

http://jsbin.com/wizati/1/edit?html,css,output 谢谢。

在 Chrome 42.0 中它运行良好。 - stanze
3个回答
4
将 vertical-align: middle; 添加到 li 元素中： 

#brandlogo {
  text-align: center;
  padding: 0px;
  margin: 30px 0px 0px;
  position: relative;
  list-style: outside none none;
}
#brandlogo li {
  border: 1px solid #DDD;
  float: none;
  display: inline-block;
  padding: 0px 35px;
  width: auto;
  margin: 10px 10px 10px 0px;
  height: 150px;
  line-height: 150px;
  border-radius: 5px;
  vertical-align: middle;/*Add vertical align middle*/
}
#brandlogo li a {
  float: none;
  width: 100%;
}
#brandlogo li a img {
  vertical-align: middle;
}
<div class="brands container content">
  <ul id="brandlogo">
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Dickies/b/11442640011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Healing-Hands-Purple-Label/b/11442641011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Heart-Soul/b/11442643011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Koi/b/11442644011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/New-Balance/b/11442645011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Nurse-Mate/b/11442646011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Renova/b/11442647011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Skechers/b/11442648011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt="" />
      </a>
    </li>
    <li>
      <a href="http://scrub-market.hostedbywebstore.com/Wonderwink/b/11442649011" class="">
        <img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt="" />
      </a>
    </li>
  </ul>
</div>

我不知道。使用这个解决方案，我的图片无法垂直居中，而是顶部对齐。 - Moax6629
我从你的jsbin答案中复制了HTML和CSS，但它没有起作用。 这是jsbin -> http://jsbin.com/wizati/2/edit?html,css,output 和截图 -> http://screencast.com/t/vwIbEkyq - Moax6629
唯一的更改是在选择器 #brandlogo li 中添加 vertical-align: middle;。 - Alex Char
这可能是因为我所做的事情不同版本之间的原因。 - Moax6629
它正在运行并且在JS Bin中。看一下。可能需要整个HTML标记的js bin（我不使用）。 - Alex Char
显示剩余3条评论
3

CSS

#brandlogo li a {
  float: none;
  width: 100%;
  height: inherit;
  display: table-cell;
  vertical-align: middle;
}

使用上述CSS属性，我们可以将a标签设置为表格单元格，并占据其父级的全高度，同时vertical-align: middle其子元素。 JS BIN DEMO
0
添加如下代码：float: left; 
#brandlogo li {
  border: 1px solid #DDD;
  float: left;
  display: inline-block;
  padding: 0px 35px;
  width: auto;
  margin: 10px 10px 10px 0px;
  height: 150px;
  line-height: 150px;
  border-radius: 5px;
你可以移除 display: inline-block。 - CodeGay
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接