Question

我需要将文本（绝对位置）放在div中的居中放置图像上。

HTML

<ul class="col-md-12 profile-settings">
     <li class="col-md-4 col-xs-4 col-sm-4 notifications">              
        <a href="#"><img src="../img/profile/notifications.png" alt="" class="normal"><span class="notification-count"><span>04</span></span></a>
     </li>
</ul>

CSS

.profile-settngs li img
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 ul li.notifications a
{
  position: relative;
}    
 .notification-count
{
  border-radius: 60%;
  left: 57px;
  position: absolute;
  top: 46px;
  width: 18px;
}

但它在1280x960分辨率下工作正常。但其他决议，文本改变了立场。如果我删除margin-left和margin-right（对于图像的中心），它工作正常。

Answer 1

如果要将跨度文本放置在相对于a的图像集位置，将绝对位置放置到跨度。试试这样 -

    <head>
<style>
.profile-settngs li img{
  display: block;
  margin:0 auto;

}
 ul li.notifications a{
   position: relative;
}

 .notification-count{
    border-radius: 60%;
    position: absolute;
    width: 18px;
    text-align: center;
    top: 50%;
    margin-top: -30px;
    margin-left: -9px;
    left: 50%;
    z-index: 2;
}


</style>
</head>
<ul class="col-md-12 profile-settings">
            <li class="col-md-4 col-xs-4 col-sm-4 notifications">              
              <a href="#"><img src="img/1.png" alt="" class="normal"><span class="notification-count"><span>04</span></span></a>
            </li>
</ul>

css将文本放在div中的居中图像上

1 个答案: