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; 
}

来源

2017-02-11 vkaylum

您使用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'>

来源

2017-02-11 20:30:11

我会怎么做，如果我想要放置在天空图像底部的图像？ – vkaylum

使用负margin-left拉图像回到中心：

#downarrow { 
    left: 50%; 
    margin-left: -37px; /* Half of the image width */ 
}

来源

2017-02-11 20:34:51

回答

相关问题