时间戳

首页 > 解决方案 > 用javascript附加后如何在div中对齐img？

javascript - 用javascript附加后如何在div中对齐img？

问题描述

使用 javascript 将图像附加到 div 后，我想在其容器内对齐图像，但每次我top在 div 中使用时，img {}所有图像都会捕捉到容器的顶部，重叠。我创建了一个codepen：here。

由于主网站是在 wordpress 中构建的，因此我无法将主 div 设置为 flex 框，因为图标写在其 HTML 文件中的文本之前。他们设置它的方式是文本与中心对齐，图标向右浮动。

 <div>
    <span><i class="fa fa-angle-down"></i></span>
    <a href="#">Text</a>
  </div>

HTML：

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  </head>
  <body>
    <div id="1">
      <a href="#">Nummer 1</a>
      <span><i class="fa fa-angle-down"></i></span>
    </div>
    <div id="2">
      <a href="#">Nummer 2</a>
      <span><i class="fa fa-angle-down"></i></span>
    </div>
  </body>
</html>

CSS：

div {
  background-color: red;
  border: 5px solid white;
  margin-bottom: 20px;
  text-align: center;
  padding: 20px;
}

div a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
}

div img {
    position: absolute;
    left: 30px;
}

span {
  color: white;
  float: right;
}

JS：

window.onload=function(){
  var elem = document.createElement("img");
  elem.src = "https://lisaschumann.github.io/resources/images/Icon_Test.png";
  elem.height = 40;
  elem.width = 40;
  elem.alt = "icon";
  document.getElementById("1").appendChild(elem);

    var elemTwo = document.createElement("img");
  elemTwo.src = "https://lisaschumann.github.io/resources/images/Icon_Test.png";
  elemTwo.height = 40;
  elemTwo.width = 40;
  elemTwo.style = "background-color: blue";
  elemTwo.alt = "icon";
  document.getElementById("2").appendChild(elemTwo);
  }

标签： javascript

解决方案

绝对位置适用于相对定位的父元素。所以你必须使包含的 div 相对定位：

position: relative;

您也可以使用 javascript 动态执行此操作：

  elem.parentElement.style.position = 'relative';
  elemTwo.parentElement.style.position = 'relative';


window.onload=function(){
  var elem = document.createElement("img");
  elem.src = "https://lisaschumann.github.io/resources/images/Icon_Test.png";
  elem.height = 40;
  elem.width = 40;
  elem.alt = "icon";
  document.getElementById("1").appendChild(elem);

    var elemTwo = document.createElement("img");
  elemTwo.src = "https://lisaschumann.github.io/resources/images/Icon_Test.png";
  elemTwo.height = 40;
  elemTwo.width = 40;
  elemTwo.style = "background-color: blue";
  elemTwo.alt = "icon";
  document.getElementById("2").appendChild(elemTwo);
  }
div {
  background-color: red;
  border: 5px solid white;
  margin-bottom: 20px;
  text-align: center;
  padding: 20px;
  position: relative;
}

div a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
}

div img {
    position: absolute;
    top: 12px;
    left: 30px;
}

span {
  color: white;
  float: right;
}
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  </head>
  <body>
    <div id="1">
      <a href="#">Nummer 1</a>
      <span><i class="fa fa-angle-down"></i></span>
    </div>
    <div id="2">
      <a href="#">Nummer 2</a>
      <span><i class="fa fa-angle-down"></i></span>
    </div>
  </body>
</html>

推荐阅读