HTML | Центрирование

У меня возникли проблемы с центрированием изображения, когда я использую particle.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

HTML | Центрирование

ответ

Смежные вопросы