吹き出しの三角を中央寄せにしたいのに、いつも左にズレるのが気になる。

Question

こんにちは。
cssでborder-widthを使用して三角を作り、吹き出しを作りたいです。
三角の位置はちょうど吹き出しに対してx軸が中央に置きたいです。

しかしpositionのleft:50%で位置合わせすると画面が小さくなった時にどんどん左に寄ってしまいます。

メディアクエリで細かく設定して調整しているのですが、他に何かいい方法があったら教えてください！
どうぞ宜しくお願いします。
三角形をbackground-imageで入れて、三角形のサイズの半分の横幅分ネガティブマージンを入れて調節するという方法もあるようなのですが、できればcssで全て作る方法があれば知りたいです。

<p>
吹き出しの中身
</p>

p{
background-color: #AAAAAA;
color:#ffffff;
padding: 24px;
margin: 0 auto;
position: relative;
}

p::before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 1.5rem 1rem 1rem 1rem;
border-color: #AAAAAA transparent transparent transparent;
position: absolute;
top:100%;
//いつもはここで左右の位置を細かく調整しています
left: 50%;
}

Answer 1

margin: auto;で中央配置するようにするといかがでしょうか?

p::before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5rem 1rem 1rem 1rem;
  border-color: #AAAAAA transparent transparent transparent;
  position: absolute;
  top:100%;
  
  /*
  //いつもはここで左右の位置を細かく調整しています
  left: 50%;
  */
  /* margin: auto;で中央配置するようにする */
  margin: 0 auto;
  left: 0;
  right: 0;
}

position: absolute; + margin: auto; + (width, height, top, right, left, bottom) で上下左右の中央配置をするテクニックの応用です。

Comments

[bariko]

ありがとうございます！
ちゃんとできました。
これまでは
```
left: 0;
right: 0;
```
これをつけないでmargin: 0 auto;をやって試してみていたので、目から鱗でした。
本当にありがとうございました。

[new1ro]

解決できたようで、よかったです！

いちおう、中央配置の参考URL貼っておきますね。
https://cotodama.co/position-absolute-center/