自動垂直反転後のテキストセンター

Question

PHP開発を新たに開始しました。私は画面に複数のテキストを持っている、私はテキストフリップの後に画面のテキストの中心を取るしたい。私はCSSコードを持っているので、まずGoogleを試してみてください。私は新しいので、それを動作させることができません。

間違った質問がある場合は、削除することができます。

ありがとうございます。

詳細については、自分のコードで説明できます。

/*Vertical Flip*/ 
 
.verticalFlip{ 
 
    display: inline; 
 
    text-indent: 8px; 
 
} 
 
.verticalFlip span{ 
 
    animation: vertical 12.5s linear infinite 0s; 
 
    -ms-animation: vertical 12.5s linear infinite 0s; 
 
    -webkit-animation: vertical 12.5s linear infinite 0s; 
 
    color: #00abe9; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
} 
 
.verticalFlip span:nth-child(2){ 
 
    animation-delay: 2.5s; 
 
    -ms-animation-delay: 2.5s; 
 
    -webkit-animation-delay: 2.5s; 
 
} 
 
.verticalFlip span:nth-child(3){ 
 
    animation-delay: 5s; 
 
    -ms-animation-delay: 5s; 
 
    -webkit-animation-delay: 5s; 
 
} 
 
.verticalFlip span:nth-child(4){ 
 
    animation-delay: 7.5s; 
 
    -ms-animation-delay: 7.5s; 
 
    -webkit-animation-delay: 7.5s; 
 
} 
 
.verticalFlip span:nth-child(5){ 
 
    animation-delay: 10s; 
 
    -ms-animation-delay: 10s; 
 
    -webkit-animation-delay: 10s; 
 
} 
 

 
/*Vertical Flip Animation*/ 
 
@-moz-keyframes vertical{ 
 
    0% { opacity: 0; } 
 
    5% { opacity: 0; -moz-transform: rotateX(180deg); } 
 
    10% { opacity: 1; -moz-transform: translateY(0px); } 
 
    25% { opacity: 1; -moz-transform: translateY(0px); } 
 
    30% { opacity: 0; -moz-transform: translateY(0px); } 
 
    80% { opacity: 0; } 
 
    100% { opacity: 0;} 
 
} 
 
@-webkit-keyframes vertical{ 
 
    0% { opacity: 0; } 
 
    5% { opacity: 0; -webkit-transform: rotateX(180deg); } 
 
    10% { opacity: 1; -webkit-transform: translateY(0px); } 
 
    25% { opacity: 1; -webkit-transform: translateY(0px); } 
 
    30% { opacity: 0; -webkit-transform: translateY(0px); } 
 
    80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@-ms-keyframes vertical{ 
 
    0% { opacity: 0; } 
 
    5% { opacity: 0; -ms-transform: rotateX(180deg); } 
 
    10% { opacity: 1; -ms-transform: translateY(0px); } 
 
    25% { opacity: 1; -ms-transform: translateY(0px); } 
 
    30% { opacity: 0; -ms-transform: translateY(0px); } 
 
    80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 

 
.bgimg{ 
 
    position: relative; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.imgcentered { 
 
    width: 100%; 
 
    position: absolute; 
 
    /*top: 50%; 
 
    left: 40%; 
 
    transform: translate(-50%, -50%);*/ 
 
} 
 

 
.sentence{ 
 
    font-size: 75px; 
 
    color: black; 
 
    text-transform: uppercase; 
 
}

<div class="bgimg"> 
 
    <div class="imgcentered"> 
 
     <h2 class="sentence">WE ARE<div class="verticalFlip"> 
 
       <span>INDIAN</span> 
 
       <span>Perfection</span> 
 
       <span>Trustworthy</span> 
 
       <span>Responsive</span> 
 
       <span>Supportive</span> 
 
      </div> 
 
     </h2> 
 
    </div> 
 
</div>

Answer 1

あなたの問題は、ボックスモデルと関係しています。あなたがそれらの単語を表示している方法は、不透明度をフェードアウトさせることですが、それでもまだスペースを取っています。このため、あなたは自分の位置をabsoluteに設定しました。それが絶対であれば、余分な幅をボックスに追加することはできないので、CSSのデフォルトのセンタリングは機能しません。しかし、あなたがアブソリュートをオフにすると、あなたはそれにdisplay: noneでアニメートすることができないので、お互いの上に座るようにそれらを得る方法がありません。

position: absoluteを離して、遅延/タイミングを行うためにCSSに依存しないことをお勧めします。代わりに、各インターバルで、リスト内の次のスパンにクラス（たとえばactive）を追加し、他のクラスからクラスを削除する簡単なJSをsetIntervalで追加します。次に、アクティブでないものにはディスプレイnoneを設定し、アクティブなものにはdisplay: inline-blockを設定します。

どちらの方法でも、左の位置をjavascriptで動的に設定するか、javascriptでループするかのいずれかを行う必要があります。私は純粋なCSSだけでそれをやる方法はないと信じています。