1. ホーム
  2. css

CSS、centered div、shrink to fit?

2023-09-27 17:11:55

質問

私が欲しいのはこれです。

text text text text text text text text text text text
text text text text text text text text text text text
                   +-----------+
                   | some text |
                   +-----------+
text text text text text text text text text text text
text text text text text text text text text text text

...ここで、"some text"ブロックはdivです。 div は、テキストを折り返さずに収めるのに必要な最小限の幅であってほしいのです。 テキストが長すぎて折り返しなしで収まらない場合は、折り返されてもかまいません。

div の幅を明示的に指定したくありません。min-widthやmax-widthも設定したくありません。言ったように、折り返しなしで1行に収めるにはテキストが多すぎる場合、折り返されてもかまいません。

どのように解決するのですか?

DIV要素はデフォルトではブロックレベルであり、自動的に100%の幅を取得します。 これを変更するには、次のCSSを使用します...

.centerBox {
  display:inline-block;
  text-align:center;
}


<div class="centerBox">
  Some text
</div>

EDIT : inline属性ではなくCSSクラスを使用するように更新し、"block"を"inline-block"に変更。