Question

我对一个关键的CSS非常不熟悉。我试图将一些放在img的中心，其中图像的形状不同。

＆＃13;

.imgCounter {
  z-index: 500;
  margin-top: 60px;
  position: absolute;
  color: #23527c;
  margin-left: -60px;
}

＆＃13;

<span>
          <img class="img-responsive feed-photo" ng-src="../upload/post-photos/{{image.attachmentURL}}" alt="Photo" style="display:inline;" ng-style="{ 'opacity' : ($index == 3 && post.postImages.length > 4) ? '0.5' : '1' }">
          <a href="#" class="imgDelete" ng-if="post.timelineStrore.hasControl" ng-show="image.showDeleteIcon" title="Delete Photo" ng-click="DeletePostAttachment(post.timelineStrore.id, image.postAttachmentId,'image')">
          <i class="fa fa-close"></i>
        </a>
     <i style="text-align:center;vertical-align:central;color: #23527c;cursor: pointer !important;font-family:Times, Times New Roman;font-style:normal;font-size:50px;" ng-if="post.postImages.length - 4 > 0 && $index == 3" id="{{$parent.$index}}{{$index}}" onclick="SetDataGallery(this.id)"> + {{post.postImages.length - 4}}</i>
    </span>

＆＃13;

另一个问题是我不知道图像的大小，因此无法提供任何核心margin-top:value和margin-left:value类型的工作人员。

Answer 1

这是我在尝试将容器垂直或水平放置在容器内时经常使用的一种技术：

.imgCounter{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

变换根据自己的宽度和高度移动元素，而不是使用top / left定位元素，根据父维度设置元素的起始位置。

把文字放在图像中心点？

1 个答案: