Как отобразить абзац под тегом h1 в CSS Flex - PullRequest
Новая
       58

Как отобразить абзац под тегом h1 в CSS Flex

0 голосов
/ 04 августа 2020

Я делаю эффект пишущей машинки, когда мое имя набирается, и единственное, что работает, чтобы сохранить его по центру, - это justify-content: center. Единственное, я не могу поместить абзац под гибким элементом, а абзац действует так, как будто его нет, и ничего не работает. Я пробовал top: 315px;, но это не сработало. 

  body {
  min-height: 100%;
  display: flex;
  justify-content: center;
}

h1 {
  position: absolute;
  animation: type 1s steps(22), blinkTextCursor 500ms steps(44) infinite normal;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  width: 14ch;
  transform: translateY(-50%) scale(2);
}

@keyframes type {
  0% {
    width: 0ch;
  }
  100% {
    width: 15ch;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: black;
  }
  to {
    border-right-color: transparent;
  }
  #welcome {
    position: relative;
    top: 315px;
  }
<body>
  <h1>Hi, I'm Winston</h1>
  <p id="welcome">text</p>
</body>

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

Просто нужно удалить абсолютное положение и добавить направление гибкости, которое в вашем случае составляет column

body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1 {
  animation: type 1s steps(22),
    blinkTextCursor 500ms steps(44) infinite normal;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  width: 14ch;
  transform:translateY(-50%)  scale(2);
}
@keyframes type {
  0% {
    width: 0ch;
  }
  100% {
    width: 15ch;
  }
}
@keyframes blinkTextCursor{
  from{
    border-right-color:black;
  }
  to{
    border-right-color:transparent;
  }
  #welcome {
    position: relative;
    top: 315px;
  }
<body>
  <h1>Hi, I'm Winston</h1>
  <p id="welcome">text</p>
</body>
1 голос
/ 04 августа 2020

Добавьте это в свой css. 

#welcome{
  position: absolute;
  margin-top: 100px;
}

Final CSS. 

  body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

h1 {
  position: absolute;
  animation: type 1s steps(22), blinkTextCursor 500ms steps(44) infinite normal;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid black;
  width: 14ch;
  transform: translateY(-50%) scale(2);
}
#welcome{
  position: absolute;
  margin-top: 100px;
}

@keyframes type {
  0% {
    width: 0ch;
  }
  100% {
    width: 15ch;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: black;
  }
  to {
    border-right-color: transparent;
  }
}
...