テキストよりも幅の広いテキストのセンタリング最大幅

Question

私は境界線を持つ2つの円の中にp要素を持っていますが、p要素を円の幅に基づいて中央に配置する必要があります私は最大幅を使用したので、2つのp要素を作成する必要はありません。私はこれが原因で中心にならないと信じていますが、私は間違っている可能性があります。誰もがこの問題を回避するには良いハックを知っている場合は私を啓発してください

DEMO

<div class="one"> 
    <div class="two"> 

    <p class="survive">Surviving Earth</p> 

    </div> 
</div> 


.one { 
    width: 300px; 
    height: 300px; 
    border-radius: 50%; 
    border: 20px inset #81ff14; 
} 

.two { 
    width: 250px; 
    height: 250px; 
    border-radius: 50%; 
    border: 20px outset #81ff14; 
    margin: auto; 
    margin-top: 5px; 
    text-align: center; 
} 

.survive { 
    font-size: 36px; 
    max-width: 100px; 
} 

Answer 1

あなた100pxに広い<p>は、ブロックレベルであるので、インラインtext-align: centerルールに従わないであろう。あなたは、水平方向の中心にそれを置くためにそれを自動的に左右のマージンを与える必要がある：一度これを行う

.survive { 
    font-size: 36px; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100px; 
} 

、あなたはそれが右にすぎビットを座って気づくでしょう。これは、最初の単語が100ピクセルの制限（約140ピクセル）よりも広く、ブラウザが単語の中に折り返さないためです。

.one { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    border: 20px inset #81ff14; 
 
} 
 

 
.two { 
 
    width: 250px; 
 
    height: 250px; 
 
    border-radius: 50%; 
 
    border: 20px outset #81ff14; 
 
    margin: auto; 
 
    margin-top: 5px; 
 
    text-align: center; 
 
} 
 

 
.survive { 
 
    font-size: 36px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 100px; 
 
    text-align: center; 
 
}

<div class="one"> 
 
    <div class="two"> 
 

 
    <p class="survive">Surviving Earth</p> 
 

 
    </div> 
 
</div>