Текст не по центру изображения

Question

Отображается карта местоположения пользователя, а затем отображается сообщение поверх карты. Я хочу динамически масштабировать карту (mapWidth & mapHeight) на основе пользовательского устройства & Размер окна и расположение текста в центре.

Я использую 50% верхнее/левое позиционирование, но часто текст не находится в центре.

var ip = '1.2.3.4'; 
 
var msg = 'Welcome User'; 
 

 
var mapUrl = 'https://maps.googleapis.com/maps/api/staticmap?center='; 
 
var mapWidth = 250; 
 
var mapHeight = 150; 
 
var mapParams = '&zoom=9&size='+mapWidth+'x'+mapHeight+'&scale=1'; 
 

 
var locationUrl = 'https://ipapi.co/'; 
 
var locationField = '/latlong/'; 
 

 
var updateMap = function(data){ 
 
    $('.map-img').attr('src', mapUrl + data + mapParams); 
 
    $('.ip').text(msg).fadeIn('slow'); 
 
}; 
 

 
$.get(locationUrl + ip + locationField, updateMap);

.ip { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="position:relative;"> 
 
    <img class="map-img" src=""> 
 
    <div class="ip"></div> 
 
</div>

Answer 1

Проблема происходит потому, что содержащий div охватывает всю ширину страницы. Вы должны установить его на display: inline-block. Было бы также лучше сделать внутренний div покрыть всю ширину его контейнера и использовать text-align: center над left: 50%, иначе вам придется рассчитать ширину текста вручную и вычесть половину этого значения для централизации текста. Попробуйте это:

var ip = '1.2.3.4'; 
 
var msg = 'Welcome User'; 
 

 
var mapUrl = 'https://maps.googleapis.com/maps/api/staticmap?center='; 
 
var mapWidth = 250; 
 
var mapHeight = 150; 
 
var mapParams = '&zoom=9&size=' + mapWidth + 'x' + mapHeight + '&scale=1'; 
 

 
var locationUrl = 'https://ipapi.co/'; 
 
var locationField = '/latlong/'; 
 

 
var updateMap = function(data) { 
 
    $('.map-img').attr('src', mapUrl + data + mapParams); 
 
    $('.ip').text(msg).fadeIn('slow'); 
 
}; 
 

 
$.get(locationUrl + ip + locationField, updateMap);

.container { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.ip { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
    display: none; 
 
    margin-top: -0.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <img class="map-img" src=""> 
 
    <div class="ip"></div> 
 
</div>

Answer 2

Использование

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