如何将我的图像固定在中心？

Question

我在向下滚动时试图变小图像时遇到问题。 直到现在我得到了这个，它完美地工作，除了当我向下滚动时，图像变小到图片的左上角，而不是中间。 这样图像就不会停留在中心。 我有什么办法可以将图像保持在中间或以某种方式将锚点更改为中心？

 // When the user scrolls down 50px from the top of the document, resize the header's font size window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("logohome").style.height = "15%"; document.getElementById("logohome").style.width = "15%"; } else { document.getElementById("logohome").style.height = "40%"; document.getElementById("logohome").style.width = "40%"; } }

 #logohome{ position: fixed; top: 0; left: 43%; width: 35%; transform: translate(0%, 0%); transition: 0.2s; }

 <div id="logohome"> <img src="img/logosmallbrown.png" width="50%" height="50%"> </div>

Answer 1

这用 css 很容易

#logohome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

Also I feel you can get rid of `width="50%" height="50%"` from the `img` tag.

1. `position: fixed` - Keeps your image fixed on the page
2. `top: 50%` - Places the image at 50% distance from the top of the window
3. `left: 50%` - Places the image at 50% distance from the left edge of the window

You should first try doing this much so you see how you image placement is.

Next add:
4. `transform: translate(-50%, -50%)` This will move your image "upwards" by 50% of its height and "leftwards" by 50% of its width and thus place it exactly in the center. 


Here is the working code snippet:



  
 
  
  
 
   
 
    
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("logohome").style.height = "15%";
    document.getElementById("logohome").style.width = "15%";
  } else {
    document.getElementById("logohome").style.height = "40%";
    document.getElementById("logohome").style.width = "40%";
  }
}
 
    
#logohome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
    
<div id="logohome">
  <img src="https://static1.squarespace.com/static/575a6067b654f9b902f452f4/59e64b57cf81e064f900819a/5c8c127beb393116ec4e1c52/1552683697079/300Logo.png?format=1500w">
</div>
 
   
 
  

Answer 2

我为你做了两个决定。 第一个是position: fixed ，第二个解决方案是position: sticky 。 在第二种解决方案中，您的图片将始终严格集中在分数margin-left: auto和margin-right: auto 。

有必要吗？

 window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("logohome").style.width = "15%"; document.getElementById("logohome").style.left = "42%"; } else { document.getElementById("logohome").style.width = "35%"; document.getElementById("logohome").style.left = "32%"; } }

 body { height: 3000px; } #logohome{ position: fixed; top: 0; left: 32%; width: 35%; transform: translate(0%, 0%); transition: 0.2s; text-align: center; }

 <div id="logohome"> <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" width="50%" height="50%"> </div>

这是position: sticky的解决方案：

 window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("logohome").style.width = "15%"; } else { document.getElementById("logohome").style.width = "35%"; } }

 body { box-sizing: border-box; margin: 0; padding: 0; height: 3000px; } #logohome{ position: sticky; top: 0; width: 35%; transition: 0.2s; text-align: center; margin-left: auto; margin-right: auto; }

 <div id="logohome"> <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" width="50%" height="50%"> </div>

Answer 3

您可以通过以下代码执行此操作：

img{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Answer 4

先用标签包裹标签，然后让标签从标签继承集中属性。 这是HTML的代码，修改它。

<div>
Sample Text
<span style="text-align: center;"><img src="file_path_here"></span>
<!--Now you can put stuff here-->
</div>