将 CSS 对象居中放入框中

Center a CSS object in a box

本文关键字：CSS 对象      更新时间：2023-09-26

试图让受JS和CSS影响的文本在框中居中，但无论我尝试什么，它都不起作用。

有关代码，请参见下文（或本代码笔）。

   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);
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
 body {
   font-weight: 600;
   font-size: 40px;
 }
 
 .text {
   margin: auto;
   width: 60%;
   border: 3px solid #73AD21;
   padding: 10px;
   text-align: center;
 }
 
 p {
   display: inline-block;
   vertical-align: top;
   margin: 0;
   font-weight: 600;
   font-size: 40px;
 }
 
 .word {
   position: absolute;
   width: 500px;
   opacity: 0;
 }
 
 .letter {
   display: inline-block;
   position: relative;
   float: left;
   transform: translateZ(25px);
   transform-origin: 50% 50% 25px;
 }
 
 .letter.out {
   transform: rotateX(90deg);
   transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
 
 .letter.behind {
   transform: rotateX(-90deg);
 }
 
 .letter.in {
   transform: rotateX(0deg);
   transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .wisteria {
   color: #8e44ad;
 }
 
 .belize {
   color: #2980b9;
 }
 
 .pomegranate {
   color: #c0392b;
 }
 
 .green {
   color: #f49a4d;
 }
 
 .midnight {
   color: #98e322;
 }
<div class="text">
  <p>unleash the power of </p>
  <p>
    <span class="word wisteria">visual media.</span>
    <span class="word belize">visual media.</span>
    <span class="word pomegranate">visual media.</span>
    <span class="word green">visual media.</span>
    <span class="word midnight">visual media.</span>
  </p>
</div>

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);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
 body {
   font-weight: 600;
   font-size: 40px;
   margin:auto;
 }
html {
  display:flex;
  height:100%;
}
 .text {
   border: 3px solid #73AD21;
   padding: 10px;
   text-align: center;
 }
 
 p {
   display: inline-block;
   vertical-align: top;
   margin: 0;
   font-weight: 600;
   font-size: 40px;  
 }
 
 .word {
   position: absolute;
   opacity: 0;
 }
 
 .letter {
   display: inline-block;
   position: relative;
   float: left;
   transform: translateZ(25px);
   transform-origin: 50% 50% 25px;
 }
 
 .letter.out {
   transform: rotateX(90deg);
   transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
 
 .letter.behind {
   transform: rotateX(-90deg);
 }
 
 .letter.in {
   transform: rotateX(0deg);
   transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .wisteria {
   color: #8e44ad;
 }
 
 .belize {
   color: #2980b9;
 }
 
 .pomegranate {
   color: #c0392b;
 }
 
 .green {
   color: #f49a4d;
 }
 
 .midnight {
   color: #98e322;
 }
<div class="text">
  <p>unleash the power of </p>
  <p>
    <span class="word wisteria">visual media.</span>
    <span class="word belize">visual media.</span>
    <span class="word pomegranate">visual media.</span>
    <span class="word green">visual media.</span>
    <span class="word midnight">visual media.</span>
  </p>
</div>

您可能还想为保存绝对文本的第二个 P 指定一些大小。

p+p {
  width:5.5em;
}

演示

相关文章：