Wie positioniere ich Text auf dem Mittelpunkt eines Bildes?

Question

Ich möchte Text auf dem Mittelpunkt eines Bildes positionieren. Ich habe dies versucht:

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

und meine css:

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

Es funktioniert, aber nicht auf unterschiedliche Größe der Bilder wie unten:

Der Text wird angezeigt, aber basierend auf der Bildgröße ist der Text nicht richtig positioniert.

Wie kann ich das beheben?

Answer 1

Offensichtlich funktioniert hardcoding spezifische Werte wie Sie nicht für willkürliche Größen arbeiten.

Es gibt lots and lots of techniques zum Zentrieren von Elementen vertikal (horizontal ist trivial). Hier ist ein einfacher:

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>

übrigens eine Reihe anderer Probleme mit Ihrem Code gibt es, am deutlichsten kann man nicht nisten <a> Tags ineinander wie du tut, und du Sie sollten sich entscheiden, ob Sie Ihren CSS inline oder in einer .css-Datei speichern möchten. (Legen Sie es in eine .css-Datei.)