put text on a image center point?

Question

i am very much unfamiliar with a critical css. i am trying to put some on a center of a img where images on differnt shape.

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

<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>

Also another problem is i don't know the size of the image so can't put any hardcore margin-top:value and margin-left:value kinds of staff.

you should be able to apply one of the approaches explained in this general post: https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div?rq=1 — aroundtheworld, Jun 10 '17 at 09:50
It gives you the better idea to put text on image [Link](https://stackoverflow.com/a/8709295/6202039) — Jay Patel, Jun 10 '17 at 09:51

score 0 · Answer 1 · answered Jun 10 '17 at 10:13

Here's a technique i frequently use when trying to center stuff vertically or horizontally inside a container:

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

transform moves the element based on its own width and height as opposed to positioning with top/left which sets the elements starting position based on parent dimensions.

put text on a image center point?

1 Answers1