Невозможно центрировать div внутри визуализированного JS - PullRequest
Новая
       11

Невозможно центрировать div внутри визуализированного JS

0 голосов
/ 26 июня 2019

Я пытался использовать эффект частиц на заднем плане, у меня был какой-то текст в центре этого элемента и эффект частиц на заднем плане. Файлы javascript ссылаются на файлы particleJS, которые вы можете найти здесь. Github ParticleJS . Но я просто не могу отцентрировать его по центру, потому что JS рендерит его одновременно, и есть способ, которым я могу это сделать. Ссылка на codepen 

body{
  margin:0px;
  padding: 0px;
}

canvas{
  display:block;
  height: 100%;
  vertical-align:bottom;
}

#particles-js{
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

#name{
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" href = "particle.js"></script>
	<link rel="stylesheet" media="screen" href="style.css">
	<title>Linko</title>
</head>
<body>
<div id="wrapper">
	<div id="particles-js">
		<script src="particles.js"></script>
    	<script src="app.js"></script>
	<div id="name">
		<p>Hello there</p>
	</div>
	</div>
	</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 27 июня 2019

Вы можете добавить position: absolute; к элементу #name, чтобы он шел над холстом. Затем измените align-content:center на align-items:center в # частицах-js дел.

Вот обновленная кодовая ручка :)

https://codepen.io/anon/pen/vqWePJ

position:absolute необходим, потому что элемент HTML по умолчанию (posistion:static) позиционируется как поток, один за другим, в своих родителях, поэтому вы не можете иметь одно перекрытие другого. Добавление position:absolute к одному из элементов удалит его из этого потока и поместит его так, как если бы он был один в своем родительском элементе, так что теперь он может перекрывать другие.
Вы можете увидеть эту ссылку для более полного объяснения позиционирования CSS. https://www.w3schools.com/css/css_positioning.asp

Для проблемы align-content / align-items align-content используется для выравнивания по нескольким линиям, а align-items для выравнивания в направлении, обратном направлению гибкого блока.
Я считаю, что названия здесь неутешительны и немного сбивают с толку, поскольку justify-content используется для выравнивания одной строки в направлении flex box, но я не был здесь во время этого обсуждения, у них, вероятно, была причина сделать это таким образом.
Вы можете увидеть этот вопрос В чем разница между align-content и align-items? для получения более подробной информации об этом.

0 голосов
/ 27 июня 2019

Попробуйте: 

#name{
  color: white;
  align-self: center;
}

Это приведет к тому, что div 'name' будет горизонтально центрирован внутри div 'частиц-js'.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...