html – 位置图标垂直居中于div [复制]

前端之家收集整理的这篇文章主要介绍了html – 位置图标垂直居中于div [复制]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Vertically centering a div inside another div23个
我想把我的放大镜垂直放在我的div的中心.

我该怎么做呢?

演示:http://jsfiddle.net/6ewn37gt/

  1. span.text-content {
  2. background: rgba(23,165,195,0.5);
  3. color: white;
  4. cursor: pointer;
  5. display: table;
  6. opacity: 0;
  7. width: 100%;
  8. height: 100%;
  9. -webkit-transition: opacity 500ms;
  10. -moz-transition: opacity 500ms;
  11. -o-transition: opacity 500ms;
  12. transition: opacity 500ms;
  13. }
  14.  
  15. ul li:hover span.text-content {
  16. opacity: 1;
  17. }
  1. <ul>
  2. <li>
  3. <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
  4. <a href="#"></a>
  5. <span class="text-content"><span><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
  6. </div>
  7. </li>
  8. </ul>

解决方法

您可以向span元素添加类并应用以下样式:
  1. span.text-content {
  2. background: rgba(23,0.5);
  3. color: white;
  4. cursor: pointer;
  5. display: table;
  6. opacity: 0;
  7. width: 100%;
  8. height: 100%;
  9. -webkit-transition: opacity 500ms;
  10. -moz-transition: opacity 500ms;
  11. -o-transition: opacity 500ms;
  12. transition: opacity 500ms;
  13. }
  14. ul li:hover span.text-content {
  15. opacity: 1;
  16. }
  17. .imgCont {
  18. display: table-cell;/*set display to table cell*/
  19. vertical-align: middle;/*add vertical align middle*/
  20. text-align: center;/*add text align to center for horizontal align too*/
  21. }
  1. <ul>
  2. <li>
  3. <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
  4. <a href="#"></a>
  5. <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>
  6. </div>
  7. </li>
  8. </ul>

猜你在找的HTML相关文章