別のdiv内でdivを水平に中央揃え - スクロールバーを使用することはできません

Question

親divには複数の子divが1行あります。子divの幅の合計は、親divと私の画面の幅よりも大きくなります。私は、テキスト "CENTERED X CENTERED"を水平にセンタリングしたいと思います。私はスクロールバーを表示したくありません。私は空白を使用する必要があります：nowrap。

<div style="width:100%; overflow:hidden; text-align:center"> 
    <div style="display:inline-block; white-space:nowrap; width:100%; margin-left:auto; margin-right:auto; text-align:center"> 
    <div style="display:inline-block">My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text...</div> 
    <div style="display:inline-block">CENTERED X CENTERED</div> 
    <div style="display:inline-block">My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text...</div> 
</div> 

どのように私は私のコードを修正することができますか？

Answer 1

余分なdivを使用できますか？最も外側の部分はオーバーフロー：隠されているので、余分なdivを超過幅にする - コンテンツよりも広い。その後、いくつかの巧妙なCSS使用して、それを中央にすることができます

https://jsfiddle.net/5cvujqd3/

基本構造

<div class="outer"> 
    <div class="inner"> 
    <!-- inline-block stuff here --> 
    </div> 
</div> 

そして、いくつかのCSSを

.outer { 
    width: 100%; 
    overflow: hidden; 
    background: green; 
} 
.inner { 
    width: 10000em; /*super wide*/ 
    margin-left: -5000em; /*half the width*/ 
    background: #cbb; 
    position: relative; 
    left: 50%; 
    text-align: center; 
} 

Answer 2

使用transform:translateX()、white-space:nowrapとoverflow:hidden;

.parent { 
 
    overflow: hidden; 
 
} 
 
.parent > div { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.parent > div > div { 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="inner"> 
 
    <div>My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text...</div> 
 
    <div>CENTERED X CENTERED</div> 
 
    <div>My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text... My text...</div> 
 
    </div> 
 
</div>