CSS Позиционирование и выравнивание - PullRequest
Новая
       12

CSS Позиционирование и выравнивание

0 голосов
/ 19 октября 2018

Я работаю над веб-сайтом, где я хочу, чтобы текст был в центре страницы (страница без возможности прокрутки).У меня есть контейнер div в центре, но я не могу получить текст в центре.Важно, чтобы у h1 было position: fixed из-за анимаций, которые я планирую использовать. Это то, что я создал ранее Пожалуйста, проверьте видео, чтобы понять, чего я пытаюсь достичь здесь (или ранее достигнуто).
Но это был не адаптивный дизайн, поэтому начал его менять.Проверьте код здесь: jsFiddle

Если есть другой способ достижения анимации без h1{position:fixed}, решения приветствуются.

Ps Я попытался получить эффект с помощьюсправка по <span> и JavaScript + jQuery, но не была удовлетворена результатами.

Спасибо!

Если вы видите код, есть два тега h1, теперь, когда страница загружаетсяЯ хочу, чтобы содержимое 1-го h1 тега было fadeInDown, а после задержки от 2s до fadeOutDown (для этой цели используется animate.css ) Если я не использую position:fixed вmy h1 помечает содержимое каждого h1 наложенными друг на друга, которые я не хочу.

Вы можете проверить jsFiddle, я обновил его анимациями. 

body {
  overflow: hidden
}

.content {
  height: 50vh;
  width: 80%;
  color: #ff7100;
  width: 80%;
  margin: 0 auto;
  text-align: center;
	
}

h1 {
position:fixed;
  /* try commenting this to see how it affects the animation (effect is not the one desired)*/
  opacity: 0
}

.main .content h1 {
	
  animation: fadeInDown, fadeOutDown;
  animation-duration: 1s, 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards, forwards;
  animation-timing-function: ease-in, linear;
}

.main .content h1:nth-child(1) {
  /* margin-left: 35%; */
  -webkit-animation-delay: 2s, 4s;
  animation-delay: 2s, 4s;
}

.main .content h1:nth-child(2) {
  /* margin-left: 35%; */
  -webkit-animation-delay: 4.5s, 6s;
  animation-delay: 4.5s, 6;
}

.main .content h1:nth-child(3) {
  /* margin-left: 30%; */
  -webkit-animation-delay: 15.5s, 18s;
  animation-delay: 15.5s, 18s;
}

.main .content h1:nth-child(4) {
  /* margin-left: 28%; */
  animation: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  -webkit-animation-delay: 18.5s;
  animation-delay: 18.5s;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}
<div class="container-fluid main" style="border:10px solid red;">
<p> I need the 'Websites' and 'Development' in the center of the column. At the moment .text-center doesn't work 
  <div style="border:10px solid purple;width:80%;margin:15% auto ">
    <div class="content row">
      <div class="col text-center" style="border:10px solid black;">
        <h1>Websites</h1>
        <h1>Development</h1>
      </div>
    </div>

  </div>

</div>

Чтобы повторить ВЫПУСК , который у меня здесь есть, Я не могу получить h1 в центреколонка.

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Это должно центрировать ваш фиксированный h1 относительно страницы.Также определение position: relative для родительского элемента может помочь в понимании контекста вашего элемента h1, используя position: absolute в качестве дочернего элемента 

h1 {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
}
0 голосов
/ 19 октября 2018

если ваша страница имеет такой же размер, как и тело, добавление к h1 

transform:translate(-50%,-50%);
top:50%;
left:50%;

Может быть достаточно, и мне любопытно, почему вы не можете заменить фиксированный на абсолютный в вашем случае, потому что центрируете контейнерне имеет смысла, если вы используете фиксированные элементы.

...