0

I used a code that I found on Stack Overflow, to use vertical-align: middle using triple div from the following page: How can I vertically center a div element for all browsers using CSS?

I have 3 texts, 1 h1 and 2 h2 in my page that are all being put in the same container div, looks like the following:

.texts {
  -webkit-text-stroke: 1px white;
  font-family: sans-serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#h1landing {
  font-size: 4em;
  animation: fading 3s forwards;
}

.outertexts {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.innertexts {
  display: table-cell;
  vertical-align: middle;
}

#h2 {
  animation: introThis 6s forwards;
  font-size: 2em;
}

#h2v2 {
  font-size: 2em;
  animation: introAwaits 9s forwards;
}

.h2 {
  margin-top: 0px;
}

@keyframes introThis {
  0% {
    opacity: 0%;
  }
  50% {
    opacity: 0%;
  }
  65% {
    opacity: 100%;
    transform: translateY(0px)
  }
  70% {
    animation-delay: 5s;
    transform: translateY(0px)
  }
  100% {
    transform: translateY(-150px)
  }
}

@keyframes introAwaits {
  0% {
    animation-delay: 5s;
    opacity: 0%;
  }
  60% {
    opacity: 0%
  }
  75% {
    opacity: 100%;
    transform: translateY(0px)
  }
  80% {
    animation-delay: 5s;
    transform: translateY(0px)
  }
  100% {
    transform: translateY(-100px)
  }
}

@keyframes fading {
  0% {
    opacity: 0%;
    transform: translateX(80%);
  }
  50% {
    opacity: 100%;
    transform: translateX(0);
  }
  75% {
    transform: translateY(0px);
    animation-delay: 10s
  }
  100% {
    transform: translateY(-200px)
  }
}
<div class="outertexts">
  <div class="innertexts">
    <div class="texts">
      <h1 id="h1landing">
        Header 1
      </h1>
      <div class="h2">
        <h2 id="h2">
          Header 2-1
        </h2>
        <h2 id="h2v2">
          Header 2-2
        </h2>
      </div>
    </div>
  </div>

In the inserted Snippet, you could see that between Header 1, Header 2-1 and Header 2-2 there are big gaps, and I would like to close these gaps (Between the 2 h2s). I tried a few things but none of them are working and honestly, my brain is neither. I hope anyone could fix this; Im very sorry for the length of this question.

Thank you very much in advance!

Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
Dam
  • 7
  • 3

1 Answers1

0

You can decrease the gap between 2 h2s by,

h2 {
   margin-top: 0;
   margin-bottom: 0;
}

you defined the class .h2 and make margin zero but that cannot affect inside of the div.

sarbend
  • 16
  • 3