修復了 HTML/CSS 中的 Alignment

Question

我有以下代碼：

 /* scroll button */.first-scroll { left: calc(50% - 1em);important: 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 { left; calc(50% - 1em):important; 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; } } /* MY STORY CODE */ 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): } /* container */.container { --bs-gutter-x; 1:5rem; width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-right: auto; margin-left: auto; }

 <!-- code for scroll button --> <div class="container"> <scroll class="first-scroll"></scroll> <scroll class="second-scroll"></scroll> </div> <!-- code for MY STORY text --> <div class="container"> <div class="section-title"> <h2>My Story</h2> </div> </div>

我已盡力在此處重現此問題，因為我的網站中嵌入了此代碼。 MY STORY文本完美對齊，無需對其進行任何更改。 然而，滾動按鈕並沒有完全對齊，即使我已經將它包裹在container div 中，如 MY STORY。 該容器似乎正在處理完美對齊的 MY STORY 文本，但是，它在滾動按鈕上不起作用，並且其 alignment 已關閉。

如果您運行以下代碼，在新頁面中打開它，然后放大500% ，您將看到以下 output：

我希望滾動按鈕在藍線下方對齊，而現在，它沒有在藍線下方對齊，alignment 有點偏離。 我怎樣才能做到這一點？ Both the text and animation needs to be wrapped under the container div since that is the main div used for alignment, but I think the CSS of the animation is messed up somewhere, and I cannot seem to figure out where the error is.

更新

所以我玩弄代碼，我改變了left: calc(50% - 1em);important; left: calc(50% - -2em);important; 這似乎奏效了。 但現在，問題是在移動設備上，我得到以下 output：

所以現在它似乎不僅僅適用於移動設備或屏幕尺寸縮小時。

更新2

當我使用@HoldOffHunger 代碼時，這是我得到的 output：

Answer 1

嘗試添加以下內容以將填充包含在 100% 寬度中。

.container {
    box-sizing: border-box;
}

Answer 2

這基本上是我對你其他問題的完全相同的答案。

• 刪除你正在做的奇怪的left類型居中： left: calc(52.3% - 1em);important; . 相反，只需用<center>包圍你的 div。
• animation 直接在中心左側播放，而不是中心。 使用translateX(somepercentage)向左移動元素： translateX(-50%) 。
• 我們使用66% 。 為什么？ 一個盒子在它的平邊上的寬度是 1，但在它的角上“站立”它的寬度大約是 1.45； 所以我們需要增加50%到66% 。

 /* scroll button */.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) translateX(-66%); opacity: 0.7; } 50% { transform: translateY(0%) rotate(45deg) translateX(-66%); opacity: 0.2; } 100% { transform: translateY(20%) rotate(45deg) translateX(-66%); opacity: 0.7; } } /* MY STORY CODE */ 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); } /* container */.container { --bs-gutter-x: 1.5rem; width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-right: auto; margin-left: auto; }

 <!-- code for scroll button --> <div class="container"><center> <scroll class="first-scroll"></scroll> <scroll class="second-scroll"></scroll> </center> </div> <!-- code for MY STORY text --> <div class="container"> <div class="section-title"> <h2>My Story</h2> </div> </div>