上下の中央寄せをしたい

POINTの文字を上下に中央よせ(円形の吹き出しのど真ん中に文字を持っていきたい)したい場合、どうすればいいですか？

<!DOCTYPE html> <html> <head> <style> .balloon3 { position: relative; display: inline-block; margin: 1.5em 15px 15em 0;/*--時計回りで上右下左だね、中２つは特に何も無い感じ*/ padding: 0 5px; width: 90px; height: 90px; line-height: 90px; text-align: center; vertical-align: middle; color: #FFF; font-size: 20px; font-weight: bold; background: #a58eff; border-radius: 50%; box-sizing: border-box; }

.balloon3:before {/--疑似要素の直前に要素を追加,これが吹き出しの△を作るわけではないらしい->ちょっとむずい！！->白の三角形/
content: "";
position: absolute;
bottom: -8px;
right: -8px;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #a58eff;
z-index: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/--吹き出しはじまり/

</style> </head> <body>  <div class="balloon3" > <p>POINT</p> </div>  </body> </html>

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

flexboxを使えば簡単にできます。

css
1.balloon3 {
2  align-items: center;
3  display: flex;
4  justify-content: center;
5  /*　以下省略　*/
6}

投稿2021/11/16 16:12

miyabi_pudding

総合スコア9555

nitori-kun

2021/11/16 23:23

ご回答いただいた3行を追加してみたのですが、２枚目の画像のようになってしまいました。

miyabi_pudding

2021/11/17 00:30

line-heightを取ってみて下さい。

nitori-kun

2021/11/17 23:19

ありがとうございます！flexboxを使わずにline-heightだけで簡単にできました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

上下の中央寄せをしたい

関連した質問