将图标垂直居中放置在div中

这个问题在这里已经有了答案:

  • 垂直居中一个div在另一个div 23的答案

  • 您可以向span元素添加一个类并应用以下样式:

    span.text-content {
      background: rgba(23, 165, 195, 0.5);
      color: white;
      cursor: pointer;
      display: table;
      opacity: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: opacity 500ms;
      -moz-transition: opacity 500ms;
      -o-transition: opacity 500ms;
      transition: opacity 500ms;
    }
    ul li:hover span.text-content {
      opacity: 1;
    }
    .imgCont {
      display: table-cell;/*set display to table cell*/
      vertical-align: middle;/*add vertical align middle*/
      text-align: center;/*add text align to center for horizontal align too*/
    }
    <ul>
      <li>
        <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
          <a href="#"></a>
          <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
        </div>
      </li>
    </ul>
    链接地址: http://www.djcxy.com/p/75867.html

    上一篇: Position icon vertically centre in div

    下一篇: Disable links in an iFrame