html - 连续 3 个元素，但中间应包含多个 div 并居中

Question

我正在尝试创建一个选项滑动器。这是我的代码

let mode = 0;
let divs = [];

for(let i = 0; i < 3; ++i)
  divs[i] = document.getElementById("mode"+i);

function hide(m) {
  let dom = divs[m];
  dom.classList.remove("show");
  dom.classList.add("hide");
}

function show(m) {
  let dom = divs[m];
  dom.classList.add("show");
  dom.classList.remove("hide");
}

function next() {
  hide(mode);
  mode = (mode+1)%3;
  show(mode);
}

function previous() {
  hide(mode);
  mode = (mode+2)%3;
  show(mode);
}

.text-wrap > * {
  background: red;
  position: absolute; 
  top:0px; 
  text-align: center;
}

.swipe-wrap {
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hide {
    visibility: hidden;
}

.show { 
    visibility: visible;
    animation: fadein 1.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="swipe-wrap">
  <button onclick="previous()">&lt;</button>
  <div class="text-wrap">
    <div class="show" id="mode0">Lorem</div>
    <div class="hide" id="mode1">Ipsum</div>
    <div class="hide" id="mode2">Dori Me</div>
  </div>
  <button onclick="next()">&gt;</button>
 </div>

<, > 应该尽可能地在 div 中的最左边和最右边。中间的文本应垂直和水平居中。但是，我没有将文本居中。

我的方法总体上是错误的还是可以通过样式属性的一些很好的组合来修复？

Answer 1

在 .text-wrap 下面添加 css 使元素垂直和水平居中

.text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
} 

let mode = 0;
let divs = [];

for(let i = 0; i < 3; ++i)
  divs[i] = document.getElementById("mode"+i);

function hide(m) {
  let dom = divs[m];
  dom.classList.remove("show");
  dom.classList.add("hide");
}

function show(m) {
  let dom = divs[m];
  dom.classList.add("show");
  dom.classList.remove("hide");
}

function next() {
  hide(mode);
  mode = (mode+1)%3;
  show(mode);
}

function previous() {
  hide(mode);
  mode = (mode+2)%3;
  show(mode);
}

.text-wrap > * {
  background: red;
  position: absolute; 
  text-align: center;
}

.swipe-wrap {
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hide {
    visibility: hidden;
}

.show { 
    visibility: visible;
    animation: fadein 1.5s;
}

.text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="swipe-wrap">
  <button onclick="previous()">&lt;</button>
  <div class="text-wrap">
    <div class="show" id="mode0">Lorem</div>
    <div class="hide" id="mode1">Ipsum</div>
    <div class="hide" id="mode2">Dori Me</div>
  </div>
  <button onclick="next()">&gt;</button>
 </div>