时间戳

首页 > 解决方案 > 隐藏和取消隐藏 div 元素后 img 失去中心位置

javascript - 隐藏和取消隐藏 div 元素后 img 失去中心位置

问题描述

我有一个在按钮单击时隐藏和取消隐藏 div 元素的功能，它工作正常。问题是一旦 div 被隐藏然后取消隐藏，IMG 就会失去其中心位置。我不知道这是什么原因造成的。任何帮助表示赞赏。提前致谢。

function hide_unhide() {
  var x = document.getElementById("cont1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#cont1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}
<div id="cont1">
  <img src="https://img.icons8.com/color/96/000000/stackoverflow.png" />
</div>

<button onclick="hide_unhide()">toggle</button>

标签： javascripthtmlcss

解决方案

这是一个简单的错误。您需要将其更改为灵活，而不是阻塞。

function hide_unhide() {
  var x = document.getElementById("cont1");
  if (x.style.display === "none") {
    x.style.display = "flex";
  } else {
    x.style.display = "none";
  }
}

推荐阅读