HTML/CSS 中元素的 Alignment

Question

我有以下代碼：

 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>

這基本上是一個滾動按鈕，在我這邊 output 看起來像這樣：

如您所見，滾動按鈕的 alignment 略微偏離，我希望它位於MY STORY文本的頂部或居中。 我將如何完成這項任務？

MY STORY文本的代碼如下：

 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>

我將如何完成這項任務？

基本上，滾動按鈕應該在文本的正上方

Answer 1

請注意，您的.section-title的偽元素使用calc設置了left屬性，並考慮了每個元素width的一半：

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

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

但是scroll聲明中的left屬性不使用calc 。 因此，一種可能的解決方法是使用它。 由於每個scroll元素的寬度為2em ，因此其中一半是1em 。 所以：

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

請參閱下面的演示。

 #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.：除非您出於瀏覽器兼容性的原因使用此定位布局，否則您可能應該考慮使用更現代的布局模塊，例如 flexbox 或網格，您的生活會更輕松。