连续 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

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

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

连续 3 个项目，但中间应包含多个 div 并居中

3 items in a row, but the middle should contain multiple divs and be centred

html

css

centering