將文字放在圖像中心點上？

我對臨界CSS非常不熟悉。我試圖把一些放在一個img的中心，其中不同形狀的圖像。將文字放在圖像中心點上？

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

而且另一個問題是我不知道圖像的大小，因此不能把任何鐵桿margin-top:value和margin-left:value種人員。

來源

2017-06-10 nayan chowdhury

你應該能夠應用在這篇一般性文章中解釋的方法之一：https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div?rq = 1 – Rockafella

它給你更好的想法把圖像上的文字[鏈接]（https://stackoverflow.com/a/8709295/6202039） –

這裏的一個技術我試圖垂直或水平居中在容器內的東西時，經常使用：

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

變換移動基於其自身的寬度和高度的元件，而不是與頂部定位/左其設定元素的起始位置基於父維度。

來源

2017-06-10 10:13:36

將文字放在圖像中心點上？

回答

相關問題