如果父元素的宽度为300％，但每个孩子的宽度为100％，则水平居中放置子元素

问题描述

我有一个动态滑块，左右两个按钮。 也就是说，每张幻灯片的父级宽度增加100％。 2张幻灯片* 100％= 200％。 In example class="slider"; width:'200%'@H_404_4@

我想将每张幻灯片的文本放在页面中间。但是我希望文本不仅在幻灯片容器中滑动，而且在其父/母宽度（例如class='carousel'@H_404_4@）中滑动。

下面的代码是滑块现在的外观示例。

JavaScript，您应该忽略它。实现它，以使代码正常工作。

document.addEventListener('DOMContentLoaded',function() { //display function after HTML is loaded

  const left = document.querySelector('.left');
  const right = document.querySelector('.right');

  var slider = document.getElementById('slider');
  var leftImg = document.getElementById('left');
  var rightImg = document.getElementById('right');
  var sections = document.querySelectorAll('.slide').length; // get number of slides
  var sectionIndex = 1;

  slider.style.width = ' ' + 100 * sections + '%';

  function changeOpacity() {
    if (sectionIndex == 1) {
      leftImg.style.opacity = '0.4';
    } else {
      leftImg.style.opacity = '1';
    }
    if (sectionIndex == sections) {
      rightImg.style.opacity = '0.4';
    } else {
      rightImg.style.opacity = '1';
    }

  }

  left.addEventListener('click',function() {
    var leftImg = document.getElementById('left');
    sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

  right.addEventListener('click',function() {
    sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

})@H_404_4@

.slider-container {
  padding: 25px 0px;
  width: 40%;
  margin: auto;
}

.slider-container .carousel {
  overflow: hidden;
  height: 260px;
  width: 100%;
  border:solid 2px black;
  position:relative;
}

.slider-container .slider {
  display: -webkit-Box;
  display: -ms-flexBox;
  display: flex;
  height: 100%;
  -webkit-transition: .5s;
  transition: .5s;
}

.slider-container .slider .slide {
  width: 100%;
}


.slider-container .arrow-container {
  width: 70px;
  position: absolute;
  bottom: 0;
}@H_404_4@

<div class="slider-container mobile-container text-left">
  <div class="carousel relative">
    <div id="slider" class="slider">

      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director,Margot Fonteyn Academy                      of Ballet</span>
        </div>
      </div>
      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director,Margot Fonteyn Academy                      of Ballet</span>
          </div>
        </div>
      </div>
    </div>
    <div class="controls">
      <div class="arrow-container d-flex justify-content-between ">
        <div>
          <button class="left" id="left" style="opacity: 0.4;">Left                     </button>
        </div>
        <div>
          <button class="right" id="right">Right</button>
        </div>
      </div>
    </div>
  </div>
</div>@H_404_4@

下面的代码段是我想要的。但是我应该居中，我也不知道该怎么做。 我尝试使用fl

document.addEventListener('DOMContentLoaded',function() {
    sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

})@H_404_4@

.slider-container {
  margin: auto;
  padding: 25px 0px;
}

.slider-container .carousel {
  overflow: hidden;
  height: 260px;
  width: 80%; /* the width i want */
  border: solid 2px black;  /* the border for your understading */
  position: relative;
}

.slider-container .slider {
  display: -webkit-Box;
  display: -ms-flexBox;
  display: flex;
  height: 100%;
  -webkit-transition: .5s;
  transition: .5s;
}

.slider-container .slider .slide {
  width: 100%;
}

.slider-container .comment {
  max-width: 352px;
  padding: 30px 0px;
}

.slider-container .arrow-container {
  width: 70px;
  position: absolute;
  bottom: 0;
}@H_404_4@

<div class="slider-container mobile-container text-left">
  <div class="carousel relative">
    <div id="slider" class="slider">
      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director,Margot Fonteyn Academy of Ballet</span>
        </div>
      </div>

      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director,Margot Fonteyn Academy of Ballet</span>
        </div>
      </div>
    </div>
    <div class="controls">
      <div class="arrow-container d-flex justify-content-between ">
        <div>
          <button class="left" id="left" style="opacity: 0.4;">Left                     </button>
        </div>
        <div>
          <button class="right" id="right">Right</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>@H_404_4@

您可以在此摘录中看到文本从比上一个示例更远的位置向右滑动。 我需要将幻灯片居中，因为我希望左侧也一样。 我已经尝试过使用flex-column,align-items:center on class="slide".@H_404_4@了，但是效果很好，但是class="controls"@H_404_4@并没有居中，因为它们是position:absolute@H_404_4@，我试图将它们放到其他地方，但是没有用。 >

我真的希望你们的确了解我想要的，也希望我能收到至少一些建议。这是我的第一个问题，对不起，冗长的代码。 反正谢谢你：）

解决方法

您的轮播是宽度的80％，因此，如果您希望将其居中，则可以执行以下操作：margin：轮播类上的auto为0。