HTML |居中
问题描述:
我在使用particles.js时无法对图片进行居中处理。图像居中,但略偏离中心。为什么它这样做,我怎么能中心呢?HTML |居中
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'>
答
使用负margin-left
拉图像回到中心:
#downarrow {
left: 50%;
margin-left: -37px; /* Half of the image width */
}
我会怎么做,如果我想要放置在天空图像底部的图像? – vkaylum