CSSの吹き出し文字の位置がずれる

Question

おはようございます。
この画像のような吹き出しを作ろうとしています。

いろんなパラメータを操作したりして綺麗な形を作ろうとしているのですが、
吹き出し内の文字列が上下中央揃えと左右中央揃えがずれてしまいます。
paddingで調整しても、吹き出しの三角形の高さがずれたりしてしまいます。
良さげなCSSのオプションで上手く実現できる方法があるでしょうか。

<FONT class="sample">文字列</FONT>

.sample
{
  margin:0px 15px 0px 0px;
  padding:1.5px 0px 0px 0px;
  height:22.5px;
  border-radius:1em 0em 0em 1em;
  position:relative;
  display:inline-block;
  text-align:center;
  width:90px;
  color:#ffffff;
  background:#007000;
}

.sample:after
{
  content:"";
  position:absolute;
  top:50%;
  right:-24px;
  margin-top:-12px;
  border:12px solid transparent;
  border-left:12px solid #7f0f5b;
}

Answer 1

flexboxレイアウトなら簡単です。

.sample
{
  margin:0px 15px 0px 0px;
  padding:0px 0px 0px 0px; /*paddingで位置調整しないので0に変更*/
  height:22.5px;
  border-radius:1em 0em 0em 1em;
  position:relative;

  display:flex; /*変更（inline-flexでも可）*/
  justify-content: center; /*追加*/
　align-items: center; /*追加*/

  text-align:center;
  width:90px;
  color:#ffffff;
  background:#007000;
  font-size: 0.8em; /*文字小さくしたほうが分かりやすいので一回り小さく*/
}

関係ありませんがFONTタグはもう廃止されてます。
pタグなどを使うようにしましょう。

Comments

[SQLinjection]

ありがとうございます。
実装してみたところ、↑の画像のように文字はやや上にずれてしまいます。
また、after で三角形は同じものを使ったところ、
やはり三角形の端がはみ出してしまいます。heightで調整をしてみてダメではない状況になりましたが、
上下中央揃えの実現が質問の目的ですので、いい方法はありますでしょうか？

[aKusano]

表示確認のブラウザに何を使ってますか？
flexboxがプレフィクス無しで動くのはIEだとIE11だけです。
flexboxのサポート環境詳細はこちらでご確認ください。
https://caniuse.com/#search=flex

サポートされている環境ならば上記の記述で指定したエリアの上下左右中央にコンテンツを自動配置することができます。（サポート環境でも動かないならスペルミスなどの可能性が高いです）
もし古い環境も含めて上下中央に配置したいなら、
yoshinaviさんが回答されているようにheightとline-heightを同じpx数値に揃えるという方法があります。
ただしこれは複数行の文字列には対応していませんので、可変長の文字列が入って折返しが発生したり、
長い文字列を改行して2行で表示したいといった場合には使用できません。

なお三角形の矢印部分をきちんと揃える部分については三角形の高さとボックスの高さが揃うように数値を調整するしかないんじゃないでしょうか。数学が得意なら計算すればどの数値の組み合わせの時にピッタリ同じ数値になるかは計算できると思います。（私は得意じゃないので揃うまでいろいろ試す派ですが／苦笑）

[SQLinjection]

ありがとうございます。
ブラウザは、PC版として最新版Firefox・Chrome・Safari、AndroidのFirefoxでテストをしており、
IEは試しておりませんでした。
flexbox というのは知らないオプションでしたが、コピペで実装しているのでスペルミスではなさそうです。
その後も数時間試してみたのですが、CSSでの描画は画像と違ってアンチエイリアシスによるドットの欠落や、
拡大縮小にも強いことや、CSSテンプレートでいろんな場所に使い回せる点を考慮してのものでした。
vertival-aling は使えないので、line-height や font-size なども使っていろいろ試しましたが、
三角形がはみ出したりしてどうしてもトレードオフでした。
PCでうまくサイズがあったとしても、view-port等で画面サイズを統一しない限り、
スマホアクセスになったり拡大率などの関係でCSSの描画だとずれやすいので、
暫定対応として画像を使うことにしました。ご回答ありがとうございました。

Answer 2

対応していないブラウザもありますが clip-pathで。

.sample {
  margin: 0 1em 0 0;
  padding: .5em 0 .45em;
  border-radius: 1em 0 0 1em;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 90px;
  color: #ffffff;
  background-color: #007000;
  line-height: 1.1;
}

.sample::after {
  content: "";
  position: absolute;
  width: 1.5em;
  top: 0;
  bottom: 0;
  left: 100%;
  background-color: #7f0f5b;
  -webkit-clip-path: polygon(20% 0, 100% 50%, 10% 100%, 0% 100%, 0% 0%);
  clip-path: polygon(20% 0, 100% 50%, 10% 100%, 0% 100%, 0% 0%);
}
```**動くサンプル：**[https://jsfiddle.net/w620yt5v/](https://jsfiddle.net/w620yt5v/)

---

【clip-path | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/clip-path](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path)

【【CSS】CSSでマスク、クリッピングをしてみよう | unitopi - ユニトピ -】
[http://unitopi.com/css3-clip/](http://unitopi.com/css3-clip/)

【Can I use... Support tables for HTML5, CSS3, etc】
[https://caniuse.com/#search=clip-path](https://caniuse.com/#search=clip-path)

【html - How to make clip-path works on microsoft edge? - Stack Overflow】
[https://stackoverflow.com/questions/39477755/how-to-make-clip-path-works-on-microsoft-edge](https://stackoverflow.com/questions/39477755/how-to-make-clip-path-works-on-microsoft-edge)

Comments

[SQLinjection]

ありがとうございます。
なるほど、clip-path を使うんですね。これは盲点でした。
うまいですねぇ～　完璧です。

Answer 3

「line-height」を「height:22.5px;」に揃えてみてください。

以下を追加してください。

.sample {
  line-height: 22.5px;
}

Comments

[SQLinjection]

ありがとうございます。
実はこの質問を投稿する前にも、line-height ・ font-size ・ height を使って調整も試みましたが、
なかなかうまくいっておりませんでした。
現状CSSだけで三角形を作るとなるとピクセル単位での調整が必要みたいですね。
私はCSSをネットで逆引きしていろいろと属性やオプションを調べて使ってる程度なので、
これからも勉強する余地がありそうです。

[yoshinavi]

他の回答にもあるように、中央寄せはいくつかあります。ブラウザはデフォルトCSSがあるので、リセットしてから試してみてください。
1行ならheightとline-heightを同じ値にすると、テキストは中央（上下）に寄ります。