HTML/CSS 对齐问题-解网

问：

所以我的页面中有这个部分，我希望箭头与容器垂直对齐，但我似乎无法实现这一点。也许这是一个愚蠢的问题，或者我犯了一个愚蠢的错误，但我刚刚开始学习 CSS，我并不像我想的那样好。感谢您抽出宝贵时间接受采访！

.slider {
  position: relative;
  width: 80%;
  margin: 1rem auto;
  /* border: thin solid black; */
  text-align: center;
}

.slider-slides {
  position: relative;
  height: 400px;
}

.slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}

.slider-slide svg {
  height: inherit;
  width: inherit;
  object-fit: cover;
  object-position: 50% 0%;
}

.slider-slide.active {
  opacity: 1;
  visibility: visible;
}

.slider-btns {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center; /* Centra verticalmente los botones */
  width: 100%;
  height: 100%;
  top: 0; /* Reinicia la posición superior a 0 */
  font-size: 3rem;
  font-weight: bold;
}

.slider a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: thin solid #000;
  text-decoration: none;
  background-color: #fff;
  color: #000;
  transition: all 0.3s ease;
}

.slider a:hover {
  color: #4d4d4d;
}

<section id="seccion12" class="section" data-scroll-spy>
        <h2>Responsive slider</h2>
        <br />
        <div class="slider">
          <div class="slider-slides">
            <div class="slider-slide active">
              <img
                src="https://cdn.theathletic.com/app/uploads/2023/10/04020934/GettyImages-1715814678-1536x1059.jpg"
                alt="Soccer"
              />
            </div>

            <div class="slider-slide">
              <h4>Diapositiva 2</h4>
              <p>
                Empezamos la semana adquiriendo conocimientos teóricos sobre
                JSON y las APIs, que veremos más adelante. Después de eso
                empezamos a estudiar el DOM, sobre el cual vimos los siguientes
                contenidos: Nodos, elementos y selectores Atributos y
                Data-Attributes Estilos y variables CSS Clases CSS Texto y HTML
                Traversing Creación de Elementos y Fragmentos Templates HTML
                Modificación de elementos
              </p>
            </div>

            <div class="slider-slide">
              <img
                src="https://source.unsplash.com/random/1000x1000/?stadium,night"
                alt="Stadium"
              />
            </div>

            <div class="slider-slide">
              <h4>Diapositiva 2</h4>
              <p>
                Empezamos la semana adquiriendo conocimientos teóricos sobre
                JSON y las APIs, que veremos más adelante. Después de eso
                empezamos a estudiar el DOM, sobre el cual vimos los siguientes
                contenidos: Nodos, elementos y selectores Atributos y
                Data-Attributes Estilos y variables CSS Clases CSS Texto y HTML
                Traversing Creación de Elementos y Fragmentos Templates HTML
                Modificación de elementos
              </p>
            </div>
          </div>

          <div class="slider-btns">
            <a class="prev" href="#">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="1rem"
                height="1rem"
                fill="currentColor"
                class="bi bi-arrow-left"
                viewBox="0 0 16 16"
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                />
              </svg>
            </a>
            <a class="next" href="#">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="1rem"
                height="1rem"
                fill="currentColor"
                class="bi bi-arrow-right"
                viewBox="0 0 16 16"
              >
                <path
                  fill-rule="evenodd"
                  d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
                />
              </svg>
            </a>
          </div>
        </div>
      </section>

我尝试更改顶部、翻译、显示和位置属性，但我无法让它工作。

html css css-位置

根据 CSS，我假设滑块的高度为 400px。然后，如果我将它与您提供的屏幕截图进行比较，我还假设图像溢出了内容，其中图像高度也应该是 400px。这就是问题所在。如果是这样，我的建议是将其添加到您的CSS中：.slider-slide img { height:100%; object-fit:contain; width:100%; }

答： 暂无答案

上一个：无法理解为什么绝对定位的元素在滚动时没有停留在预期位置？

下一个：绘制到“位置：固定”叠加层，与滚动的内联内容对齐

HTML/CSS 对齐问题

HTML/CSS aligning problems

评论