javascript - 文字不在图片中央

Question

我正在显示用户位置的 map ，然后在 map 顶部显示一条消息。我想根据用户的设备和窗口大小动态调整 map (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 over 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>