cssで円を装飾したい。中の文字が縦書きになってしまう事象の解決方法を教えてください。

Question

前提・実現したいこと

画像の真ん中あたりに文字（１行）の周りにCSSで色付けをして配置したいのですが
理想では６つの円を等間隔で並べたいのです。

発生している問題・エラーメッセージ

文字をかなり小さくしないと縦書きになってしまいます。

該当のソースコード

//////css部分//////
.maru2 p{
font-family: dnp-shuei-mincho-pr6n, caslon_old_face_n4,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1vw;
width: 15vw;
height: 15vw;
background: -moz-radial-gradient(:#ccadd1, #fff);
background: -webkit-radial-gradient(#ccadd1, #fff);
background:white;
border: solid 3px #8278bd;
border-radius: 50%;
line-height: 15vw;
text-align:center;
}

.box2{
position: absolute;
top: 50%;
width: 100%;
border: 0;
display: flex;
opacity: 0.7; }

.box2 div{
margin:0;
flex-grow: 1; }
</style>

//////html部分//////

<div class="box2"> <div class="maru2"> <center><p>化粧水</p></center> </div> <div class="maru2"> <center><p>乳液</p></center> </div> <div class="maru2"> <center> <p>美容液</p> </center> </div> <div class="maru2"> <center><p>クリーム</p></center> </div> <div class="maru2"> <center><p>マスク</p></center> </div> <div class="maru2"> <center><p>化粧下地</p></center> </div> </div></div>

試したこと

できれば大きさの指定をvwでつくりたいです。
pxで指定して大きく作ると理想型に近くはなりますが大きすぎて画面に納まりません。
中に入れたい文字と円の距離が遠すぎるように感じます。
かといって円を小さくすると文字が縦文字になってしまいます。
どうにか解決方法をご教授いただけないでしょうか？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

理想では６つの円を等間隔で並べたいのです。

これに関しては、下記の設定を追加すればいいでしょう。

.maru2 p{
  margin: 0 auto;
}
.box2{
  justify-content: space-between;
}

中に入れたい文字と円の距離が遠すぎるように感じます。

かといって円を小さくすると文字が縦文字になってしまいます。

円の幅を15vwと設定しているので、中の文字数が最大4文字なら、15vw÷4=3.75vw より少し小さめに設定すればどうでしょうか。

.maru2 p{
  font-size: 3.6vw;
}

---

質問とは関係ないですが、<center>タグは廃止されたので、使わないようにしましょう。

<center>: 文字列の中央揃え要素 (廃止) - HTML: HyperText Markup Language | MDN

Comments

[saito_beginner]

対処できました！
ご教授ありがとうございます！