Хотите, чтобы мой текст на кастомном загрузчике отзывчивый - PullRequest
Новая
       7

Хотите, чтобы мой текст на кастомном загрузчике отзывчивый

0 голосов
/ 27 мая 2018

Я хочу, чтобы мой центрированный текст DIV реагировал на загрузчик моего сайта.Ключ в том, что я не знаю, как я смогу это сделать.Я учусь на программиста, поэтому я надеюсь, что кто-то может помочь мне с моей проблемой:)

ПРИМЕЧАНИЕ!Загрузите фрагмент на полной странице, чтобы вы могли видеть текст: P

Вот исходный код: 

body {
    overflow: hidden
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg);
    z-index: 99;
    /* makes sure it stays on top */
}

#camera {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    /* centers the loading animation horizontally one the screen */
    top: 50%;
    /* centers the loading animation vertically one the screen */
    background-image: url(https://svgshare.com/i/6kD.svg);
    /* path to your loading animation */
    background-repeat: no-repeat;
    background-position: center;
    margin: -150px 0 0 -150px/* is width and height divided by two */
}

#text {
    line-height: 890px;
    margin: auto;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
}
<div id="preloader">
        <div id="text">Website loading...</div>
        <div id="camera"></div>
        
    </div>

Ответы [ 2 ]

0 голосов
/ 27 мая 2018

Здесь вы хотите использовать display: flex;поскольку это позволяет вам центрировать элементы как по горизонтали, так и по вертикали.Это также известно как flexbox.

Некоторые другие примечания, касающиеся кода, в этом случае у вас должно быть изображение как изображение, а не фоновое изображение, и намного проще использовать background-color: red;чем использование изображения в качестве цвета фона. 

body,
		html {
			margin: 0;
			padding: 0;
		}

		body {
			overflow: hidden
		}

		#preloader {
			position: fixed;
			background-color: red;
			z-index: 99;
			/* makes sure it stays on top */
			width: 100%;
			height: 100%;

			display: flex;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;

			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		#camera {

			height: 150px;


			/* path to your loading animation */
			background-repeat: no-repeat;
			background-position: center;

			background-size: contain;

			display: flex;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;

			flex-direction: row;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		#text {
			height: 100px;
			line-height: 890px;
			text-align: center;
			color: white;
			font-size: 20px;
			font-weight: bold;

			display: flex;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;

			flex-direction: row;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
<body>

	<div id="preloader">
		<img src="https://svgshare.com/i/6kD.svg" id="camera">
		<div id="text">Website loading...</div>


	</div>

</body>

Ура!

Следует отметить: 

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;

Это просто гарантирует, что центрирование работает во всех браузерах.

0 голосов
/ 27 мая 2018

Я думаю, что здесь лучше использовать flexbox

Я добавил стили flexbox для #preloader

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* makes sure it stays on top */
}

Вот скрипка с другими изменениями всделай все правильно

...