Question

0

190

Views

Alignment of element in HTML/CSS

I have the following code:

scroll {
  left: 50%;
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}

<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80; 
            bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll>
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80; 
            bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>

This is basically a scroll button and on my end the output is looking like this:

As you can see the alignment of the scroll button is slightly off and I would like it to be right on top of the MY STORY text or be centered. How would I achieve this task?

The code of the MY STORY text is as follows:

section {
  padding: 60px 0;
  overflow: hidden;
}
.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #45505b;
}

.section-title h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #0563bb;
  bottom: 0;
  left: calc(50% - 20px);
}

<div class="section-title">
            <h2>My Story</h2>
          </div>

How would I achieve this task?

Basically, the scroll button should be right on top of the text

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T15:15:10.855Z

Notice that your .section-title's pseudo-elements have their left property set using calc and taking into account half of each element's width:

.section-title h2::before {
  ...
  width: 120px;
  ...
  left: calc(50% - 60px);
}

.section-title h2::after {
  ...
  width: 40px;
  ...
  left: calc(50% - 20px);
}

But the left property in your scroll declaration does not use calc. Therefore one possible fix would be to use it. Since each scroll element has a width of 2em, half of it would be 1em. So:

scroll {
  /* left: 50%; */                           /* remove this line */
  left: calc(50% - 1em);                     /* add this line */
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

See demo below.

#container {
  position: relative;
  height: 5em;
}

scroll {
  /* left: 50%; */                           /* remove this line */
  left: calc(50% - 1em);                     /* add this line */
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

.first-scroll {
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}

section {
  padding: 60px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #45505b;
}

.section-title h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #0563bb;
  bottom: 0;
  left: calc(50% - 20px);
}

<div id="container">
  <scroll class="first-scroll"></scroll>
  <scroll class="second-scroll"></scroll>
</div>
<div class="section-title">
  <h2>My Story</h2>
</div>

PS.: Unless you're using this positioned layout for browser compatibility reasons, you probably should consider using more modern layout modules, such as flexbox or grid, your life would be much easier.

0

190

Alignment of element in HTML/CSS

1 answers

0

Find remote jobs

Andres GPT