javascript - 如何使用 css 对齐传单 map 中的响应图像

Question

我正在做一个网络 map (带有传单)。此 map 包含一张 png 图像，我想在手机中以 max-width:50% 样式显示。 图像以 max-width:50% 显示，但我无法在 map 右侧对齐图像。

这是我添加图片的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%;}}

问题的结果和图解说明:

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