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

回答

相關問題