如何定位圖像中心點上的文字？

Question

我想在圖片的中心位置放置文本。我已經試過這樣：

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

和我的CSS：

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

它的工作，但不能在不同大小的圖像的象下面這樣：

文本正在顯示，但基於圖像大小的文字沒有正確定位。

我該如何解決這個問題？

Answer 1

很明顯，像你正在做的硬編碼特定值不適用於任意大小。

有lots and lots of techniques垂直居中元素（水平是微不足道的）。這裏有一個簡單的一個：

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>

另外還有一些其他問題與您的代碼，最顯着的，你不能嵌套<a>標記相互喜歡你這樣做，你應該下定決心把你的css內聯還是放在.css文件中。 （把它放在.css文件中。）