2

div{
  display:inline-block;
  border-radius:50%;
  background-color:yellow;
}
<div>文字数可変のテキスト</div>

1 件の回答 1

3

border-radius で円を作るなら、aspect-ratio でボックスが正方形になることを保証して、flexible box でセンタリングするのはいかがでしょうか。

div{
  display: inline-flex;  /* センタリングのため変更 */
  border-radius: 50%;
  background-color: yellow;
  aspect-ratio: 1;  /* 正円のため追加 */
  align-items: center;  /* センタリングのため追加 */
}
<div>文字数可変のテキスト</div>
<div>文字数可変</div>

1
  • 「aspect-ratio」こんなCSSプロパティがあるのですね。初めて知りました
    – re9
    Commented 2023年5月24日 14:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。