HTML/CSS中的固定對齊-有解無憂

我有以下代碼：

/* 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 文本，它已完美對齊，但是，它不適用于滾動按鈕并且其對齊已關閉。

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

HTML/CSS 中的固定對齊

I would like the scroll button to be aligned right under the blue line, whereas right now, its not aligned under the blue line and the alignment is a bit off. How can I achieve this? 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.

UPDATE

So I played around with code and I changed the left: calc(50% - 1em) !important; to left: calc(50% - -2em) !important; and this seemed to work. But now, the problem is that on mobile devices, I am getting the following output:

HTML/CSS 中的固定對齊

So now it doesnt seem to work only on mobile devices or when the screen size shrinks.

UPDATE2

When I use @HoldOffHunger code, this is the output I get:

HTML/CSS 中的固定對齊

uj5u.com熱心網友回復：

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

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

您的代碼片段添加了box-sizing：

顯示代碼片段

/* 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;
  box-sizing: border-box;
}

<!-- 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>

uj5u.com熱心網友回復：

這基本上是我對你的另一個問題的完全相同的答案。

洗掉left你正在做的奇怪的型別居中：left: calc(52.3% - 1em) !important;。相反，只需將您的 div 用<center>.
影片直接在中心的左側播放，這不是中心。用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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399992.html

標籤：javascript html jquery css

上一篇：如何洗掉導航欄中徽標和串列項之間的空間？

下一篇：如何在影像附近的串列中垂直居中“a”？[復制]