如何在图像的中心点上放置文本？

Question

I want to position text on a image's center point. I've tried this:

<span ng-repeat="image in post.postImages" ng-init="image.showDeleteIcon= false" ng-style="{ 'display' : ($index > 3) ? 'none' :'inlne'}" ng-mouseover="image.showDeleteIcon=true" ng-mouseleave="image.showDeleteIcon=false">
  <a id="{{$parent.$index}}{{$index}}" onclick="SetDataGallery(this.id)" ng-href="../upload/post-photos/{{image.attachmentURL}}">
    <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 class ="imgcounter" style="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.$parent.$index}}{{$index}}" onclick="$('#' + this.id).click();"> + {{post.postImages.length - 4}}</i>
  </a>
</span>

and my css:

.imgcounter {
  z-index: 500;
  text-align: center;
  margin-top: 45 px;
  position: absolute;
  color: tomato;
  cursor: pointer !important;
  margin-left: -120 px;
}

It's working, but not on different size of images like below:

The text is showing, but based on image size the text is not properly positioned.

How can I fix this?

Answer 1

Obviously, hardcoding specific values like you're doing isn't going to work for arbitrary sizes.

There are lots and lots of techniques for centering elements vertically (horizontally is trivial). Here's a simple one:

 span { display:inline-block; position:relative; } .imgcounter { font-size: 40px; color:#FFF; z-index:2; position: absolute; transform: translate(-50%,-50%); /* <-- here 50% refers to the size of .imgcounter */ top:50%; left:50%; /* <-- here the 50% measures the containing span */ } 

 <span> <img src="http://placekitten.com/350/150"> <i class="imgcounter">X</i> </span> <span> <img src="http://placekitten.com/150/350"> <i class="imgcounter">TEXT</i> </span> <span> <img src="http://placekitten.com/250/350"> <i class="imgcounter">23%</i> </span> 

Incidentally there are a number of other problems with your code, most prominently you can't nest <a> tags inside each other like you're doing, and you should make up your mind whether to put your css inline or in a .css file. (Put it in a .css file.)