https://github.com/projectcubit/websit.git

我有一个小问题，我似乎无法解决。 如何居中对齐？我尝试了各种方法，但似乎都不起作用。 我尝试了Position:absolute、flex和W3中的其他方法。对不起，如果这是一个愚蠢的问题。

我对编程有点陌生，谢谢。

---

顺晟科技：

您可以使用，如果需要的话。下面是一个片段:

这里都在一行中:

如果要在一行中对齐所有内联，并在页面中间居中 只能对父级使用flex；

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
        cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
        nw[i].className = 'letter in';
  }, 340+(i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);

我签出了您的代码&添加到。

后，代码居中

添加到不起作用，原因如下： 包含的第2个具有0的宽度和高度，这是因为它的子级位于绝对位置。为了使flex工作，您需要将适当的宽度和高度设置为第二个。

但不像是由所有后代继承的，而不仅仅是孩子。