如何将传单地图中的响应式图像与 css 对齐答案

【问题标题】：How to align a responsive image in a leaflet map with css如何将传单地图中的响应式图像与 css 对齐
【发布时间】：2018-11-10 10:37:03
【问题描述】：

我正在制作一个网络地图（带有传单）。这张地图包含一个 png 图像，我想以 max-width:50% 样式显示在手机中。图片以 max-width:50% 显示，但我无法在地图右侧对齐图片。

这是我添加图片的js代码：

var logo1 = L.control();
logo1.onAdd = function(map){
    var div = L.DomUtil.create('div');
    div.innerHTML= "<div href='https://www.uma.es/'><img class='resp1' src='logo1.png'/></div>";

    return div;
}  logo1.addTo(map);

这是我的css风格：

@media screen and (max-width: 500px) {
img.resp1 {
    max-width: 50%;
    text-align: right;
} } @media screen and (min-width: 760px) { img.resp1 {
max-width: 100%;}}

问题结果及图解说明：

【问题讨论】：

标签： javascript html css leaflet maps

【解决方案1】：

如果容器具有固定高度，则您始终可以垂直或水平居中任何元素，使用父元素的相对位置和子元素的绝对位置，例如中心 x 和 y：

.container-elment {
  position: relative;
  width: 100%;
  height: 450px;
}

.child-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background: green;
}

<div class="container-elment">
  <div class="child-element">

  </div>
</div>

对于中心 x：

.container-elment {
  position: relative;
  width: 100%;
  height: 450px;
}

.child-element {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 50%;
  background: green;
}

<div class="container-elment">
  <div class="child-element">

  </div>
</div>

对于中心 y：

.container-elment {
  position: relative;
  width: 100%;
  height: 450px;
}

.child-element {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50%;
  height: 50%;
  background: green;
}

<div class="container-elment">
  <div class="child-element">

  </div>
</div>

【讨论】：