个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我在使用 particles.js 时无法将图像居中。图像居中，但略微偏离中心。为什么要这样做，我如何才能将它居中？
html
<!DOCTYPE html>
<html>
<head>
<title>particles.js demo</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="particles-js" width='100%'></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
<img id='downarrow' height="75" width="75" src='images/arrowdown.png'>
</body>
</html>
CSS
body {
margin: 0;
height: 2000px;
width: 100%;
}
::-webkit-scrollbar {
display: none;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #00a4ff;
background-image: url("http://i.imgur.com/yHL4C4u.png");
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#downarrow {
margin-left: 50%;
}
img {
position: absolute;
}
最佳答案
您正在使用 left: 50%; - 这会将图像的左边缘置于页面宽度的 50% 处。如果想让图片居中，添加transform: translateX(-50%);
body {
margin: 0;
height: 2000px;
width: 100%;
}
::-webkit-scrollbar {
display: none;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #00a4ff;
background-image: url("http://i.imgur.com/yHL4C4u.png");
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#downarrow {
margin-left: 50%;
}
img {
position: absolute;
}<div id="particles-js" width='100%'></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
<img id='downarrow' height="75" width="75" src='images/arrowdown.png'>关于javascript - 网页 |定心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42180821/
27
4
0
我在使用 particles.js 时无法将图像居中。图像居中，但略微偏离中心。为什么要这样做，我如何才能将它居中？ html particles.js demo CSS
如何使文本字段和按钮居中？ 编辑:用 SSCE 更新了我的帖子。希望这有帮助。 顺便说一下，我希望左图看起来像右图。 package pkg; import java.awt.event.Action
哦，JavaScript 之神!献给那些还记得学校三 Angular 学的人 ;-) 请参阅下面的链接，我实际上是在尝试将一些内容居中，但是由于 Angular 原因，正常的 screenwidth-
我正在尝试使主体在所有具有不同屏幕尺寸的设备中居中 白色背景部分应该居中 http://jsfiddle.net/ymnkg/1/ http://jsfiddle.net/ymnkg/1/embedd
Adopt
我正在尝试将页面居中。该页面以 chrome 和 FF 居中显示。 IE 把所有东西都推到左边。我感到困惑的地方是我对多个页面使用 1 个样式表，而其中几个页面在所有浏览器中都是正确的。最好的猜测是我
我是一名优秀的程序员,十分优秀！