Will Thatcher Ответов: 0

Возникли проблемы с установкой div с текстом внутри элемента div изображения

Я изо всех сил стараюсь, чтобы мой текст "OpenSource Inc" и текст "Live to Code" появлялись в центре моего изображения.

Думаю, это просто проблема с сортировкой моих div в моем HTML. Пожалуйста, помогите мне


**формат HTML**

<html lang="en" dir="ltr">
<link href="typewriterstyle.css" rel="stylesheet" type="text/css">

<head>
  <meta charset="utf-8">
</head>

<body>

  <div class="box">
      <div class="line-1 anim-typewriter">
          <p>OpenSource Inc.</p>
      </div>
      <div id="fadein">
          <p> Live to Code </p>
      </div>
      <img src="imagemap1.5.jpg" alt="Image" class="fadeImage" width="100%" height="100%" />
  </div>

</body>
</html>

**стиль CSS**

html{
  min-height: 100%;
  overflow: hidden;
}
body{
  height: calc(100vh - 8em);
  padding: 0em;
  color: rgba(255,255,255,.75);
  font-family: 'Monotype Corsiva', monospace;
  background-color: rgba(0, 0, 0, 0.97);

}
.line-1{
    position: relative;
    top: -50%;
    width: 25%;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 60px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.box {

}

.fadeImage {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
}

/* Animation */
.anim-typewriter{
  animation: typewriter 1.5s steps(20) 1s 1 normal both,
             blinkTextCursor 100000ms steps(100) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 6em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

#fadein {
  position: relative;
  top: 25%;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  font-size: 40px;
  font-family: 'Century', monospace;
  animation: 5.5s ease 0s normal forwards 1 fadein;
  -webkit-animation: 5.5s ease 0s normal forwards 1 fadein;
}

@keyframes fadein {
    0% {opacity: 0;}
    66% {opacity: 0;}
    100% {opacity: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  0% {opacity: 0;}
  66% {opacity: 0;}
  100% {opacity: 1;}
}


Что я уже пробовал:

я попытался настроить себя и отредактировать раздел .box в файле css.

Sunasara Imdadhusen

Было бы здорово, если бы вы могли поделиться некоторыми снимками экрана. Например, что он отображает с помощью этого кода и что именно вы бы сделали.

0 Ответов