要旨 ／「文字列に応じた幅で背景色表示させたコンテンツ」を中央表示(HTML入れ子なし)

要旨

挑戦してみたけれども出来なかったことの履歴
今後同じことを繰り返さないようにする

「文字列に応じた幅で背景色表示させたコンテンツ」を中央表示(HTML入れ子なし)

やりたかったこと
・下記内容を中央表示
・文字数は動的に変更される
・「文字数幅に応じた背景色」指定

<P>文字列</P>

実際に試してみた結果分かったこと
・出来ない
・「display:flex;」使用しても出来ない
・CSSは進化しているが、何でも出来るわけではない

最終的に採用したコード
・諦めて入れ子にした(せざるを得なかった)

<div style="text-align:center;">

  <p style="display:inline-block;background-color:white;">

    文字列

  <p>

</div>